I'm trying to export the image downloadURL (which goes to firebase storage) from uploadStorage.js and import the URL into postWorkout.js so the url can be stored in firebase realtime database.
Once I return the downloadURL I want to export it to the postWorkout.js module where the url can be added to firebase realtime database.
I hope I can make some sense of it in the explanation... My brain is fried
postWorkout.js is more about the data going to realtime database and uploadStorage.js is about posting the image URL to storage.
uploadStorage.js
export const imgStorage = (mainImg, newImgFileName, newDownloadURL) => {
// SEND THE FILE TO FIREBASE STORAGE ----------------------------------------
// Create the file metadata
/* @type {any} */
const metadata = {
contentType: "image/png",
};
// Upload file and metadata to the object.
const storageRef = ref(storage, "workoutProfileImg/" + newImgFileName);
const uploadTask = uploadBytesResumable(storageRef, mainImg, metadata);
console.log(uploadTask);
// Listen for state changes, errors, and completion of the upload.
uploadTask.on(
"state_changed",
(snapshot) => {
// Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
const progress = Math.floor(
(snapshot.bytesTransferred / snapshot.totalBytes) * 100
);
console.log("Upload is " + progress + "% done");
switch (snapshot.state) {
case "paused":
console.log("Upload is paused");
break;
case "running":
console.log("Upload is running");
break;
}
},
(error) => {
console.log(error);
},
() => {
// Upload completed successfully, now we can get the download URL
getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
// GET THE URL AND EXPORT IT TO THE POSTWORKOUT.JS
console.log("File available at", downloadURL);
newDownloadURL = downloadURL;
});
}
);
};
postWork.js
addImageBtn.addEventListener("change", (event) => {
event.preventDefault();
mainImg = addImageBtn.files[0];
newImgFileName = mainImg.name;
createImgURL = URL.createObjectURL(mainImg);
exerciseMainPic.innerHTML += `<img src="${createImgURL}" class="createdImg">`;
imgStorage(mainImg, newImgFileName, newDownloadURL);
});
// Get the video information
const workout2 = document.querySelector(".exercises");
const uploadBtn = document.querySelector(".upload_exercise");
// NEED TO STORE THE TIMER, VIDEOS AND HEADINGS
uploadBtn.addEventListener("click", () => {
// Need to loop over each heading of the workouts added
// ELEMENTS
let workoutName = document.querySelector(".name_of_workout").value;
let rounds = document.querySelector(".rounds").value;
let work = document.querySelector(".work").value;
let rest = document.querySelector(".rest").value;
const newExercises = document.querySelector(".exercises");
const newVid = document.querySelectorAll(".newVid");
let workout_info = [];
let myExercises = [];
newVid.forEach((element) => {
// Get each exercises heading
let headingDiv = element.childNodes[1];
let h2text = headingDiv.firstChild.textContent;
// Get each exercises Video URL
let itsFirst = element.firstChild;
let newURL = itsFirst.firstChild.src;
let gatheredInfo = { h2text, newURL }; // Group each Elements info
myExercises.push(gatheredInfo); //Push the grouped element info to
});
// Construct the data for firebase
let workout_gathered = {
workoutImg: createImgURL, // workoutImg: downloadURL - Should be the downloadURL from uploadStorage.js
exercises: myExercises,
timer: {
rounds: rounds,
work: work,
rest: rest,
},
};
// Push the workout data to workout info
workout_info.push(workout_gathered);
setAllProducts(workoutName, workout_info); // Calls the function to push information to firebase realtime database
});