I was trying to upload an image to my firebase storage its uploading as a 9b file and i cannot open it. its snot showing any error message. it uploads and gives the url. but in the url its broken and shows error loading preview in firebase storage
/** @type {any} */
const metadata = {
contentType: 'image/png',
};
// Upload file and metadata to the object 'images/mountains.jpg'
const storageRef = ref(storage, 'products/' + file.name);
const uploadTask = uploadBytesResumable(storageRef, file, metadata);
// 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 = (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) => {
// A full list of error codes is available at
// https://firebase.google.com/docs/storage/web/handle-errors
switch (error.code) {
case 'storage/unauthorized':
// User doesn't have permission to access the object
break;
case 'storage/canceled':
// User canceled the upload
break;
// ...
case 'storage/unknown':
// Unknown error occurred, inspect error.serverResponse
break;
}
},
() => {
// Upload completed successfully, now we can get the download URL
getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
console.log('File available at', downloadURL);
});
In the upload function you should check if user has actually selected file. Also try using uploadBytes function instead:
import { getStorage, ref, uploadBytes } from "firebase/storage";
var fileImage1 = $("#chooseImg").val();
if (!file) {
console.log("No File Selected")
} else {
const storageRef = ref(storage, 'products/' + file.name);
uploadBytes(storageRef, file).then((snapshot) => {
console.log('Uploaded a blob or file!');
});
}
const uploadTask = uploadBytesResumable(storageRef, file, metadata);
the file variable you are passing to upload contains the wrong type of data. Make sure it's a Blob and not some other data type. I was trying to upload the result of reader.readAsDataURL(file); and it behaved the same ~ just 9b of metadata.