Goal:
Select an image from local storage (IOS emulator) using Expo ImagePicker and upload it to Firebase storage
Console output:
Upload is 0% done
Upload is running
But it gets stuck there, image doesn't get uploaded
First I call this function to choose an image from local storage and retrieve blob, the image displays fine on the screen, I get an error if I try to console log the blob saying it can't be shown which I'm guessing is because its a blob
async function pickImage() {
result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: true,
aspect: [4, 3],
quality: 1,
});
if (!result.cancelled) {
let imageFile = await fetch(result.uri);
let imageBlob = await imageFile.blob()
setBlob(imageBlob)
}
}
then I attempt to upload to Firebase storage:
function uploadToFirebase(){
const storageRef = ref(storage, 'anything.jpg');
const uploadTask = uploadBytesResumable(storageRef, blob);
uploadTask.on('state_changed',
(snapshot) => {
// Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
setImageProgress((snapshot.bytesTransferred / snapshot.totalBytes) * 100)
console.log('Upload is ' + imageProgress + '% 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);
setLoadedImage(downloadURL)
});
}
);
}
I've tried every iteration of this I could find online but to no avail
I had the same problem. After searching from different topics I've found an answer. The code below uploads the image to Firebase Storage
const uploadToFirebase = async () {
const id = 101;
// this is the id of the file or you can name it
const filename = `${id}`;
const blob = await new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
// on load
xhr.onload = function () {
resolve(xhr.response);
};
// on error
xhr.onerror = function (e) {
console.log(e);
reject(new TypeError("Network request failed"));
};
// on complete
xhr.responseType = "blob";
xhr.open("GET", pickImageResult.uri, true);
xhr.send(null);
});
// a reference that points to this 'userphoto/101' location
const fileRef = ref(getStorage(), 'usersphoto/${filename}');
// upload the 'blob' (the image) in the location refered by 'fileRef'
const result = await uploadBytes(fileRef, blob);
// We're done with the blob, close and release it
blob.close();
}
Note: pickImageResult.uri is the image result from ImagePicker.launchImageLibraryAsync();