expo / firebase-storage-upload-example

This example has moved

Firebase Storage Upload Example

This example has moved to examples/with-firebase-storage-upload

firebase-storage-upload-example's Issues

Image fetching fails in SDK 28

Hi,
Thank you for the example.
I've tried to follow your sample but this line:

firebase-storage-upload-example/App.js

Line 180 in 6054401

const response = await fetch(uri);

raises the following error in expo SDK 28 (as well as in standalone app)

Unable to use this example

I wanted to see how everything works and play around with it but I am unable to install the example. I downloaded it and ran NPM install. After a while the installation failed with;

30473 warn optional SKIPPING OPTIONAL DEPENDENCY: @expo/[email protected] (node_modules/@expo/ngrok-bin-sunos-x64): 30474 warn notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/[email protected]: wanted {"os":"sunos","arch":"x64"} (current: {"os":"darwin","arch":"x64"}) 30475 verbose notsup SKIPPING OPTIONAL DEPENDENCY: Valid OS: sunos 30475 verbose notsup SKIPPING OPTIONAL DEPENDENCY: Valid Arch: x64 30475 verbose notsup SKIPPING OPTIONAL DEPENDENCY: Actual OS: darwin 30475 verbose notsup SKIPPING OPTIONAL DEPENDENCY: Actual Arch: x64 30476 verbose stack Error: [email protected] install: node-pre-gyp install --fallback-to-build --library=static_library30476 verbose stack Exit status 1 30476 verbose stack at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16) 30476 verbose stack at EventEmitter.emit (events.js:203:13) 30476 verbose stack at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14) 30476 verbose stack at ChildProcess.emit (events.js:203:13) 30476 verbose stack at maybeClose (internal/child_process.js:1021:16) 30476 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5) 30477 verbose pkgid [email protected] 30478 verbose cwd /Volumes/Mac HDD/firebase-storage-upload-example-master 30479 verbose Darwin 19.0.0 30480 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" 30481 verbose node v12.8.1 30482 verbose npm v6.11.2 30483 error code ELIFECYCLE 30484 error errno 1 30485 error [email protected] install:node-pre-gyp install --fallback-to-build --library=static_library 30485 error Exit status 1 30486 error Failed at the [email protected] install script. 30486 error This is probably not a problem with npm. There is likely additional logging output above. 30487 verbose exit [ 1, true ]

How can I make sure this installs correctly?

How can I access the uploaded files?

I want to access those files throw an uri, I don't want to download it. I have to play some audio files using Expo.Audio.Sound.create({uri: path}) so i want this path to be something like this https://www.englishdom.com/staticus/child.mp3 I don't really want to download it. I tried to use the download url with the audio function but it didn't work. so any help here, please?!

Uploading results as empty file without mime type without errors

Have anyone same problem?

Image fetch fails, response.blob hangs

I am using SDK 31, and the code seemed to work for a while, but then, the fetch started to return a "Network request failed" error. Not sure why (since I don't remember that I touched the code when it started to work).

I see the error when I wrap the fetch with try/catch:

try {
      response = await fetch(uri);
  } catch (error) {
    console.log(error);
  }

Then, I have changed the uri to an external image (https://image.shutterstock.com/image-vector/vector-illustration-cartoon-dog-260nw-131012516.jpg), fetch works, but response.blob() doesn't return. I also used try/catch, but it doesn't return at all:

let blob;
  try {
    blob = await response.blob();
  } catch (error) {
    console.log('photoActions/uploadImageAsync.' +
      'Failed to read blob from fetch\'s response. error: ');
    console.log(error);
  }

The errors occur in an android emulator and in a standalone app.
Any idea why this happens?

Response.blob() is not working

When I implemented this code, I got this mistake:

[TypeError: response.blob is not a function. (In 'response.blob()', 'response.blob' is undefined)]

When I debug it, if I print response, it prints response object after mistake. I'm sure that await/async is in the code.

Any get this error ?

image fetching fails in SDK 31 Android 5 and 7

Hi there,
I was trying this example using Expo SDK 31 and Android 5 and 7 (because SDK 31 only works with 5+)
But there is an issue here:
const response = await fetch(uri);

It will say:
[TypeError: Network request failed]

It was working when I was using SDK 27 and Android 4
Now that I upgraded Expo I came across this issue..

This sample doesn't work because of some weirdness in your package.json file

"react-native-scripts": "/Users/brentvatne/coding/create-react-native-app/react-native-scripts/react-native-scripts-1.13.13.tgz",

See https://github.com/expo/firebase-storage-upload-example/blob/master/package.json#L7

Crash when upload multiple images concurrently

For about two weeks i was struggling with crashing on expo ios standalone app when i tried to upload multiple image in a same times.

There was no crash report in my testflight dashboard nor from xcode crash window.

Also no js crash report from sentry.

Finally i figured it out by cleaning my codes. First i thought its its memory leaks when i kept uploaded image in states to show preview and i removed the related codes but it was still crashing.
Then i kept those codes and removed firebase api calls for uploading images. Now everything works fine.

So Im sure its an issue with this new api and i just reverted the codes to the old approach by @aaronksaunders https://github.com/aaronksaunders/expo-rn-firebase-image-upload
With that approach the crash still exist, but the rate reduced from 60% to less than 5% of times.

I hope you guys help to find the reason.

Thanks

Multiple photos upload

What if I want to store first the photo(s) taken in component state or async storage and later upload it using promise.all(). I hit this performance error

One of the sources for assign has an enumerable key on the prototype chain. This is an edge case that we do not support. This error is a performance optimization and not spec compliant.

I also raised this here https://stackoverflow.com/questions/50423018/upload-multiple-photos-error-one-of-the-sources-for-assign-has-an-enumerable-ke

Unhandled promise rejection: Error: Missing camera roll permission

Is there some code missing in the example? When I start the expo app for this project, it shows the buttons but when you tap on either one, it shows the following message:

[00:17:57] [Unhandled promise rejection: Error: Missing camera roll permission.]
- node_modules/react-native/Libraries/BatchedBridge/NativeModules.js:123:42 in createErrorFromErrorData
- node_modules/react-native/Libraries/BatchedBridge/NativeModules.js:80:57 in <unknown>
- ... 5 more stack frames from framework internals

Is there some code missing that should be asking the user for permission to access the camera/camera roll before taking/picking a photo?

For anyone having issues returning the downloadURL

then then then ;)

async function uploadImageAsync(uri) {

    console.log(uri);

    const response = await fetch(uri);
    const blob = await response.blob();
    const ref = firebase
        .storage()
        .ref()
        .child(uuid.v4());

    await ref.put(blob)
        .then(snapshot => {
            return snapshot.ref.getDownloadURL(); 
        })
        .then(downloadURL => {
            console.log(`Successfully uploaded file and got download link - ${downloadURL}`);
            return downloadURL;
        });
}

FirebaseStorageError unknow error

What is Obsidian.jar and token= in the url constant inside Expo Firebase ImageUpload example.

const url =
  'https://firebasestorage.googleapis.com/v0/b/blobtest-36ff6.appspot.com/o/Obsidian.jar?alt=media&token=93154b97-8bd9-46e3-a51f-67be47a4628a';

I used this example it works for few uploads while replacing blobtest-36ff6.appspot.com with mine. Now I'm started getting error after uploading 4 images.

22:52:57 [exp] FirebaseStorageError {
22:52:57 [exp]   "code_": "storage/unknown",
22:52:57 [exp]   "column": 31,
22:52:57 [exp]   "line": 17422,
22:52:57 [exp]   "message_": "Firebase Storage: An unknown error occurred, please check the error payload for server response.",
22:52:57 [exp]   "name_": "FirebaseError",
22:52:57 [exp]   "serverResponse_": "{
22:52:57 [exp]   \"error\": {
22:52:57 [exp]     \"code\": 400,
22:52:57 [exp]     \"message\": \"Permission denied. Could not access bucket test-app-01.appspot.com. Please enable Firebase Storage for your bucket by visiting the Storage tab in the Firebase Console and ensure that you have sufficient permission to properly provision resources.\"
22:52:57 [exp]   }
22:52:57 [exp] }