2

Vue dev tools screen shot Console log Screen shot

Script Code:

 import firebase from "@/firebase";
    import {
      getStorage,
      ref,
      uploadBytes,
      getDownloadURL,
      updateDoc,
    } from "firebase/storage";
    export default {
      data() {
        return {
          imagesUrl: [],
        };
      },
      methods: {
        chooseFile() {
          document.getElementById("imgUpload").click();
        },
    
        uploadImage(e) {
          this.files.push(e.target.files[0]);
          this.images.push(URL.createObjetURL(this.files));
        },
        createCity: async function () {
          const docRef = firebase.addDoc(
            firebase.collection(firebase.firestoreDB, "cities"),
            {
              name: "Tokyo",
              country: "Japan",
            }
          );
    
          var photos = [];
    
          for (var i = 0; i < this.files.length; i++) {
            // files.values contains all the files objects
            const file = this.files[i];
            const storage = getStorage();
            const metadata = {
              contentType: "image/jpeg",
            };
            const storageRef = ref(storage, "temp/" + docRef.id + "/" + file.name);
    
            const snapshot = await uploadBytes(storageRef, file, metadata);
            const downloadURL = await getDownloadURL(snapshot.ref);
            photos.push(downloadURL);
          }
          await console.log(photos);
          await updateDoc(docRef.id, { photosURLs: photos });
        },
      },
    };

Console Log Data:

  • TypeError: Object(...) is not a function at VueComponent._callee$ (fragment.vue?262c:453:1) at tryCatch (runtime.js?96cf:63:1) at Generator.invoke [as _invoke] (runtime.js?96cf:294:1) at Generator.eval [as next] (runtime.js?96cf:119:1) at asyncGeneratorStep (asyncToGenerator.js?1da1:3:1) at _next (asyncToGenerator.js?1da1:25:1)
Rohith Sinai Mekala
  • 23
  • 4

1 Answers1

5

You should not use the await keyword within a for or a forEach loop, see here or here.

You should use Promise.all() as follows (untested):

  const promises = [];

  for (var i = 0; i < this.files.length; i++) {
    // files.values contains all the files objects
    const file = this.files[i];
    const storage = getStorage();
    const metadata = {
      contentType: "image/jpeg",
    };
    const storageRef = ref(storage, "temp/" + docRef.id + "/" + file.name);

    promises.push(uploadBytes(storageRef, file, metadata).then(uploadResult => {return getDownloadURL(uploadResult.ref)}))
    
  }

  const photos = await Promise.all(promises);

  await console.log(photos);
  await updateDoc(docRef, { photosURLs: photos }); // <= See the change here docRef and not docRef.id
Renaud Tarnec
  • 79,263
  • 10
  • 95
  • 121
  • Firstly, Thank you for answering but that did not work. it's showing all photos in the console but not updating the photos in the firestore database – Rohith Sinai Mekala Jan 18 '22 at 09:05
  • Yes, you need to call the last line of your code with `docRef` (the `DocumentReference`) and not `docRef.id`: `await updateDoc(docRef, { photosURLs: photos });` – Renaud Tarnec Jan 18 '22 at 09:23
  • Yeah I modified already from await updateDoc(docRef, { photosURls: photos}); but thats showing me a console log error: **TypeError: Object(...) is not a function** – Rohith Sinai Mekala Jan 18 '22 at 09:37
  • I'm sorry there isn't enough info to debug your code. I'll suggest you use this extension: https://devtools.vuejs.org/ – Renaud Tarnec Jan 18 '22 at 09:58
  • Yeah I also installed the VUE dev tools, I think its not showing any error over there. could you please check it for my sake I will give you a image link that contains screenshot please do check it, here it is: (Screen shot 1: https://drive.google.com/file/d/1ar3_CRAD6SI9mnlRfDenvc2Jrf5UOysi/view?usp=sharing) (Screen shot 2: https://drive.google.com/file/d/1iqb3P5it5ixC7eLPoaqndkiMEekoScWC/view?usp=sharing) – Rohith Sinai Mekala Jan 18 '22 at 10:12
  • Could you please help me out. I'm so depended upon you.. – Rohith Sinai Mekala Jan 18 '22 at 10:35
  • Excuse me, R u there.. – Rohith Sinai Mekala Jan 18 '22 at 11:37