Angularfire: How can I retrieve images after upload in storage angularfire2 then stored in angularfiredatabase?

[Omar-Qalei]

How can I retrieve images after upload in storage angularfire2 then stored in angularfiredatabase?

I can see links in console but can't show that in ngfor html
console :
itemList{
...//another data
...//another data
...//another data
multiImages {
0: "URL image",
1: "URL image",
2: "URL image",
3: "URL image",
4: "URL image",
}
}

[Steven-Harris]

Please refer to the docs
Specifically, if you save the image path available you can use .getDownloadURL() to get the full image url

[FiringBlanks]

This question is better asked on StackOverflow. But since you asked:

//Create a random (unique) UID for file to use in Firestore and Storage
let fileID = this.afs.createId();

//Set path for Firestore upload
var firestorePath = 'Files/' + fileID
const storagePath = "/Uploads/" + fileID;

//Actually upload file to Firestore now
const storageRef: firebase.storage.Reference = firebase.storage().ref(storagePath);
const uploadTask: firebase.storage.UploadTask = storageRef.put(firestorePath);

//After uploading the file
uploadTask.then((uploadSnapshot: firebase.storage.UploadTaskSnapshot) => {

    //Fetch the download URL of the Storage file
    uploadSnapshot.ref.getDownloadURL().then((downloadURL) => {

        //Now create the Firestore entry
        this.afs.doc(path).set({
            FileName: uploadSnapshot.metadata.name,
            FileContentType: uploadSnapshot.metadata.contentType,
            FileSize: uploadSnapshot.metadata.size,
            FileURL: downloadURL,
            FileTimeCreated: uploadSnapshot.metadata.timeCreated,
        })
    }
})

[Omar-Qalei]

I solved this problem last 2 weeks ago. 👍 using file reader and for loop.
thanks for help.

[FiringBlanks]

If the issue is solved, please close it.

[ghost]

Thanku my problem solved...

[bhargav05]

how can access angular firebase storage to upload file???

[bhargav05]

core.js:1673 ERROR Error: Uncaught (in promise): FirebaseStorageError: {"code_":"storage/unauthorized","message_":"Firebase Storage: User does not have permission to access '190pc2nasnp'.","serverResponse_":"{\n \"error\": {\n \"code\": 403,\n \"message\": \"Permission denied. Could not perform this operation\"\n }\n}","name_":"FirebaseError"}

[Omar-Qalei]

core.js:1673 ERROR Error: Uncaught (in promise): FirebaseStorageError: {"code_":"storage/unauthorized","message_":"Firebase Storage: User does not have permission to access '190pc2nasnp'.","serverResponse_":"{\n "error": {\n "code": 403,\n "message": "Permission denied. Could not perform this operation"\n }\n}","name_":"FirebaseError"}

Check firebase storage rules

[VickyMutai]

core.js:1673 ERROR Error: Uncaught (in promise): FirebaseStorageError: {"code_":"storage/unauthorized","message_":"Firebase Storage: User does not have permission to access '190pc2nasnp'.","serverResponse_":"{\n "error": {\n "code": 403,\n "message": "Permission denied. Could not perform this operation"\n }\n}","name_":"FirebaseError"}

Kindly ensure user has logged in. That is an authentication error

[Acewill90]

I solved this problem last 2 weeks ago. 👍 using file reader and for loop.
thanks for help.

Can you put the code here pls,
Thank you

[Omar-Qalei]

uploadMultiImage(event) {

const files = event.target.files;
for (const file of files) {
  const id = Math.random().toString(36).substring(2);
  const reader = new FileReader();
  reader.onload = (e: any) => {
    const task = this.storage.upload(id, file).then(() => {
      const ref = this.storage.ref(id);
      const downloadURL = ref.getDownloadURL().subscribe(url => {
        this.dataAdd.multiImage.push(url);
      });
      this.percentageMultiImage = this.storage.upload(id, file).percentageChanges();
    });
  };
  reader.readAsDataURL(file);
}

}

[Acewill90]

thank you, i will check it, but in vue.js so i have to transform the code a little bit

[Acewill90]

@Omar-Qalei thanks very much for the idea, it works ;)