Uploading image to Firebase storage after using imagemanipulator

Expo SDK
1

I successfully implemented uploading an image chosen via ImagePicker to Firebase storage from this example: https://github.com/expo/firebase-storage-upload-example

The relevant code is here:

export const uploadPhoto = async (uri) => {
  const response = await fetch(uri);
  const blob = await response.blob();
  const ref = firebase
    .storage()
    .ref()
    .child(`/images/${currentUser().uid}/avatar`);
  const snapshot = await ref.put(blob);
  return snapshot.downloadURL;
};

This works great when I hand it a URI returned from ImagePicker.

However, If I modify the image (from ImagePicker) using ImageManipulator, then try to upload via the new manipulated image URI, fetch returns the following error:
[Unhandled promise rejection: TypeError: Network request failed]

Any ideas why? Shouldn’t the URIs returned from ImagePicker and ImageManipulator point to similar file types?

2

hi @ppetrick, both the ImagePicker and the ImageManipulator should return local URI’s. Can you share a snack with this issue? (snack.expo.io)

3

I spent a couple hours trying to reproduce in a Snack and couldn’t. Testing in my own app suggests that the manipulated file is getting cleared from cache for some reason. (That’s why fetch complains.) I have a whole lot going on that could potentially lead to that scenario, but haven’t found anything specific.

The weird part is that simply commenting out random bits of code can make fetch work. But those pieces of code can be pretty innocuous - like assigning variables to/from state. Why on earth would that make a difference in whether an image is cleared from cache? Frankly, I’m stumped.

Is there a way to check whether the file has been cleared from cache and when?

4

@ppetrick ImageManipulator is storing it’s results in cache directory which is monitored by the system and it might clean this directory contents.

Responding to your last question: see FileSystem.getInfoAsync

If you need to persist the file, try saving it in Expo.FileSystem.documentDirectory.

If you still need any help, please provide minimal scenario of your your app logic using snack even if it works there. I’ll happily investigate problem deeper.

And last thing: is the problem occurring on Android or iOS?

5

@barthec I definitely think cache clearing is the issue. I ultimately solved this by calling fetch, creating a blob and storing it in instance variable immediately after the image manipulation. Doing that seems to ensure the system doesn’t clear the cache (before I can pull it from cache).

I spent a little more time trying to recreate the bug in snack, but didn’t succeed in doing so. Nevertheless, you can see the stripped down version of the original, non-working code here: Image Manipulator Issue - Snack
(Again, this code works by itself, but for some reason it doesn’t when running in my full app - very strange.) Oh, and it’s IOS.

6

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.