aaronksaunders/expo-rn-firebase-image-upload

example of how to upload image in expo with react-native and firebase

Example of how to upload image in expo with react-native and firebase

Problem: Issue uploading files in react-native in expo without detaching??

**Solution: ** Thanks to the latest release of Expo and React-Native it can be done exactly as described in the Firebase documentation. See below and sample app in repo

Upload function

 export const uploadAsFile = async (uri, progressCallback) => {

  console.log("uploadAsFile", uri)
  const response = await fetch(uri);
  const blob = await response.blob();

  var metadata = {
    contentType: 'image/jpeg',
  };

  let name = new Date().getTime() + "-media.jpg"
  const ref = firebase
    .storage()
    .ref()
    .child('assets/' + name)

  const task = ref.put(blob, metadata);

  return new Promise((resolve, reject) => {
    task.on(
      'state_changed',
      (snapshot) => {
        progressCallback && progressCallback(snapshot.bytesTransferred / snapshot.totalBytes)

        var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        console.log('Upload is ' + progress + '% done');
      },
      (error) => reject(error), /* this is where you would put an error callback! */
      () => {
        var downloadURL = task.snapshot.downloadURL;
        console.log("_uploadAsByteArray ", task.snapshot.downloadURL)

        // save a reference to the image for listing purposes
        var ref = firebase.database().ref('assets');
        ref.push({
          'URL': downloadURL,
          //'thumb': _imageData['thumb'],
          'name': name,
          //'coords': _imageData['coords'],
          'owner': firebase.auth().currentUser && firebase.auth().currentUser.uid,
          'when': new Date().getTime()
        }).then(r => resolve(r), e => reject(e))
      }
    );
  });
}

make sure you set your firebase configuration in HomeScreen.js on line 26

Fix For VS Code Rendering

microsoft/vscode#21577 (comment)

expo-rn-firebase-image-upload's Issues

Can currently only create Blob from other Blob

@aaronksaunders Thank you so much for building this solution, it's really nice. However when trying I'm getting the following error:
https://www.dropbox.com/s/cz7mqropebct8wx/Screenshot%202017-12-06%2016.56.25.png?dl=0

I'm using expo 23, RN 0.50.0, and Firebase 4.7.0. Could that be the source of the issue? Meaning that this solution is no longer supported at the moment?

Thank you for your help.

Upload gives error on RCTNetowrking.sendrequest Object.assign

When trying to upload I'm receiving this error on Object.assign.

One of the sources for assign has an enumerable key on the prototype chain. Are you trying to assign a prototype property? We don't allow it, as this is an edge case that we do not support. This error is a performance optimization and not spec compliant.

Is there a way to work around this? I'm assuming it has to do with the base64 array for the image.

ImagePicker result doesn't return base64 image

Hello, thanks for sharing this. I know that my question doesn't have anything with your code, but maybe you know answer.
My ImagePicker in expo doesn't return base64 image. I updated everything in npm to last version and my package.json versions look exactly like yours in this repo. And of course I added base64:true when requesting image. But neither camera or library photo doesn't return base64. On real device or simulator.

I see that my client version on iPhone and on simulator is 1.17.0 ....

But there is no new expo client update in the app store.

Any ideas?

Unable to upload large images as bytearray

When I try to upload large photo as Uint8Array to firebase (maybe over 256kbyte more or less) I got the error code

FirebaseStorageError {
  "code_": "storage/retry-limit-exceeded",
  "message_": "Firebase Storage: Max retry time for operation exceeded, please try again.",
  "name_": "FirebaseError",
  "serverResponse_": null,
}

With small images I have no problems.

Any solution for this? Thanks.

This method only works for iOS but not Android

I've not been able to get the base64 image to upload successfully to firebase on Android. I tried your solution on my own code and the result is the same - I ended up with a file that's much smaller than the original jpeg image on firebase storage and the file was not viewable. Have you tried your example on Android? I am still on Expo 18.0 but I see you're on 19.0 already. I'm now trying out your example.

Assign has an enumerable key on the prototype chain

Im getting this error when Im calling Firebase put() to upload the image. Running on [email protected] and [email protected] (before 3.9.0 same error)

One of the sources for assign has an enumerable key on the prototype chain. Are you trying to assign a prototype property? We don't allow it, as this is an edge case that we do not support. This error is a performance optimization and not spec compliant.
handleException @ ExceptionsManager.js:63
handleError @ InitializeCore.js:125
reportFatalError @ error-guard.js:44
__guard @ MessageQueue.js:230
callFunctionReturnFlushedQueue @ MessageQueue.js:100
(anonymous) @ debuggerWorker.js:71