Vue dev tools screen shot Console log Screen shot
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 });
},
},
};
- 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)
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