React-native-image-picker: [🐛] URI returned from launchCamera callback incorrect

[scousino]

Description

I'm calling launchCamera with the saveToPhotos option. However, in the callback I get after taking a picture the URI is still the URI pointing to the temp location. When saveToPhotos is true I expect to get the URI of the photo/video in whatever location saveToPhotos puts it.

How to repeat issue and example

Call launchCamera with saveToPhotos set to true and provide a callback. In the callback you'll see the URI points to a temp location.

Solution

Return the proper URI

Additional Information

• Image Picker version: 3.0.0
• React Native version: 0.62.2
• Platform: Android
• Development Operating System: Windows
• Dev tools: Android API 29

[ravirajn22]

yes thats how its written, you can upload or show image/video from temp location. Why do you want its gallery URI?

[scousino]

With the temp location I can't run stat from react-native-filesystem on any of those files. But, in general having an option called saveToPhotos implies that you are only saving the photo to the public photos location, not also saving to the temp location.

Its both confusing and a space waster because now you have 2 of the same image saved on the phone in different locations. I think it should do one or the other, temp location if saveToPhotos is false, return gallery URI otherwise. Or, alternatively add another property to the response object that additionally gives the gallery URI when saveToPhotos is true.

[ravirajn22]

I will try to send gallery URI when returning instead of temp, but will take some time to implement.

[maxencehenneron]

This is also true when selecting a photo from the library. It returns a temp URL that cannot be used with RNFS. I want to upload the image to my server and unfortunately cannot access it...

I made a temporary hack to fix the issue:

  if (res.uri.startsWith('content://')) {
                const uriComponents = res.uri.split('/')
                const fileNameAndExtension = uriComponents[uriComponents.length - 1]
                const destPath = `${RNFS.TemporaryDirectoryPath}/${fileNameAndExtension}`

                await RNFS.copyFile(res.uri, destPath)
 }

EDIT: I investigated a bit more, and the issue is that RNFS uses the file:// protocol for the "stat", "hash"... functions. Unfortunately, we cannot get a file URI from a Content URI anymore ( this was deprecated ) so we would need to refactor RNFS ( which looks unmaintained ) to ensure it supports ContentResolver for those functions.