1

I am using the camera(react-native-image-Picker) to take a pick and save it to storage. Here is how I am doing it.

const saveImage = async () => {
    const id = firebase.firestore().collection('food').doc().id
    const storageRef = firebase.storage().ref()
    const fileRef = storageRef.child(file.fileName) //name of image to store
    await fileRef.put(file) //store image

    firebase.firestore().collection("food").doc(id).update({
      image: firebase.firestore.FieldValue.arrayUnion({
        name: file.fileName,
        url: await fileRef.getDownloadURL()
      })
    })
}


console.log(typeof file);
gives => "object"

console.log(file);
//gives => 
file = {height: 2322, 
uri:"content://com.photodocumentation.imagepickerprovidlib_temp_7a0448df-1fac-4ac7-a47c-402c62ecce4c.jpg", 
width: 4128, 
fileName: "rn_image_picker_lib_temp_7a0448df-1fac-4ac7-a47c-402c62ecce4c.jpg", 
type: "image/jpeg"}

Results: In Firebase (storage) The image is being saved as application/octet-stream instead of image/jpeg. The image is not shown, it says undefined when downloaded from storage.

Any help will be so appreciated.

Byusa
  • 2,279
  • 1
  • 16
  • 21

3 Answers3

3

This is how I was able to fix it:

const uploadImage = async () => {
    const response = await fetch(file.uri)
    const blob = await response.blob();
    var ref = firebase.storage().ref().child("FolderName");
    return ref.put(blob)
}
Byusa
  • 2,279
  • 1
  • 16
  • 21
  • 1
    Do we need to close blob? As XMLHttpRequest blob.close() ? – degergio Feb 12 '23 at 20:49
  • 1
    No, you do not need to manually close a blob in XMLHttpRequest. A blob (binary large object) is a data type in JavaScript that represents a large binary object, such as an image or video file. When you create a blob, it is automatically managed by the JavaScript runtime and will be automatically cleaned up when it is no longer needed. @degergio – Byusa Feb 13 '23 at 05:00
0

The Reference#put() method accepts a Blob, Uint8Array or ArrayBuffer. Your "file" object doesn't appear to be any of these.

Instead, we need to read the file into memory (using react-native-fs - referred to as RNFS) and then upload that data along with the required metadata. Because the file is read as base64 by RNFS, we will use Reference#putString instead as it accepts Base64 strings for uploads.

const rnfs = require('react-native-fs');

const saveImage = async () => {
  const capture = /* this is your "file" object, renamed as it's not a `File` object */
  const fileRef = firebase.storage().ref(capture.fileName);
  const captureBase64Data = await rnfs.readFile(capture.uri, 'base64');
  const uploadSnapshot = await fileRef.putString(captureBase64Data, 'base64', {
    contentType: capture.type,
    customMetadata: {
      height: capture.height,
      width: capture.width
    }
  });

  // const id = colRef.doc().id and colRef.doc(id).update() can be replaced with just colRef.add() (colRef being a CollectionReference)

  return await firebase.firestore().collection('food').add({
    image: {
      name: capture.fileName,
      url: await fileRef.getDownloadURL()
    }
  });
};
samthecodingman
  • 23,122
  • 4
  • 30
  • 54
0

Solution: Image reference in uploadBytesResumable() method

const storageRef = ref(storage,`product-images/${image.name}`);
uploadBytesResumable(storageRef,image);
F. Müller
  • 3,969
  • 8
  • 38
  • 49
Jai Parkash
  • 1
  • 1