[iOS] Don't assume that the absolute uri returned will persist

[Max93]

On iOS images was stored in Documents folder. The Document folder was stored into an folder with an hexadecimal name. This folder is regenerated and renamed for each build. For this reason if you store the absolute URL of image you loose the reference from it.

For this reason I propose to return the name of the image and the path declared on storageOptions.

I know is simple to get this information from absolute URL (simple JS String manipulation) but for me is important to inform programmer of the possibility to lose their references from love pictures.

Thank's.

[marcshilling]

I'm not sure I follow...

The Documents folder should always persist for an app on the same device. Are you using the iOS simulator?

[Max93]

yep I'm using iOS simulator, but i have tested it into app in production.
@marcshilling look this http://stackoverflow.com/questions/5607655/first-app-update-user-data-lost-was-stored-in-documents-directory

[marcshilling]

Gotcha, so the path TO the Documents directory could change, but once inside your Documents directory, everything remains the same.

I think this falls a little outside the responsibility of this image picker component. We are returning the absolute path where the photo is at that current moment, AND since the photos are being saved to the Documents directory, we've guaranteed that they will be persisted forever on the device as long as the app is installed. It should be up to the developer to then know to never rely on the absolute path and maybe use something like react-native-fs to find the path to the Documents directory.

This is definitely valuable information to know though, so thank you!

[Max93]

@marcshilling you are right ... it is outside the the responsibility of this image picker component. But the picker return an absolute path and it's good to inform the coder about the possibility to loose their (only the reference) photo.

[marcshilling]

I added a note to the README referencing this issue. Thanks for bringing it my attention!

[puredazzle]

Hello,

Wouldn't it be good then if the plugin also returned only the filename?

[i-tu]

Just letting you know that I found an alternative to using react-native-fs.

A path prepended with ~ expands to the app Documents directory.

See facebook/react-native@23909cd

[jdelafon]

The tilde did not work for me, so I save images as base64 if iOS, and as a URI if Android.

[redconnect]

@i-tu This solution works if you prefix with ~/Documents/images e.g. ~/Documents/images/myimage.png

[jsina]

I wanna send the uri of image to the API. all things is ok on android and when choose photo from gallery on IOS but when I take photo on IOS is something wrong. here is my code. if my problem related to this issue please give me some hint how could I get the correct uri for passing to API?

ImagePicker.showImagePicker(options, (data) => {
      if (!data.didCancel) {
        this.resetErrorState();
        this.props.dispatch(uploadProfilePic(data.uri));
      }
    });

[jsina]

@Max93 could you give me some hint how could I get the uri when I'm taking the photo on IOS?

[jsina]

@i-tu could you please give me more description?
how could I get the image absolute uri on code below?

gePicker.showImagePicker(options, (data) => {})

[xhw1993]

@jsina, I get the same issue, you sovle it now?

[jsina]

@xhw1993 this is all what I've done

 selectPhotoTapped = () => {
    const options = {
      title: 'عکس پروفایل خود را انتخاب کنید',
      quality: 1.0,
      maxWidth: 500,
      maxHeight: 500,
      storageOptions: {
        skipBackup: true,
        // waitUntilSaved: true,
        // cameraRoll: true,
      },
      cancelButtonTitle: 'خروج',
      takePhotoButtonTitle: 'عکس گرفتن...',
      chooseFromLibraryButtonTitle: 'انتخاب از گالری...',
    };
    ImagePicker.showImagePicker(options, (response) => {
      if (response.didCancel) {
        console.log('User cancelled image picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
      } else {
        this.resetErrorState();
        this.props.dispatch(uploadProfilePic(response));
      }
    });
  };

[reactdevrocks]

@jsina use this for ios
(Platform.OS==='android') ? response.uri : response.uri.replace('file://', '')
and in options
storageOptions: { skipBackup: true, path: 'images', cameraRoll: true, waitUntilSaved: true }

[ManigandanRaamanathan]

@jsina use this for ios
(Platform.OS==='android') ? response.uri : response.uri.replace('file://', '')
and in options
storageOptions: { skipBackup: true, path: 'images', cameraRoll: true, waitUntilSaved: true }

Is this working? @jsina

[ifo234]

I run into this issue as well, but my source was RNCamera. in some phone the "~" fix the problem to recover images but there was phone where only react-native-fs worked to get the correct path (which works for ios and android):

var RNFS = require('react-native-fs'); RNFS.DocumentDirectoryPath

source: https://stackoverflow.com/questions/39286211/react-native-ios-read-image-from-apps-documents-folder

[rahulmishra1991]

@jsina use this for ios
(Platform.OS==='android') ? response.uri : response.uri.replace('file://', '')
and in options
storageOptions: { skipBackup: true, path: 'images', cameraRoll: true, waitUntilSaved: true }

Yes that works for me...Thanks for sharing.

[Johan-dutoit]

Updated the title to make it easier to understand the problem while pinned.

[aaz11zaa]

#107 (comment)

[sebqq]

@jsina use this for ios
(Platform.OS==='android') ? response.uri : response.uri.replace('file://', '')
and in options
storageOptions: { skipBackup: true, path: 'images', cameraRoll: true, waitUntilSaved: true }

This is not working for me. After closing metro server and restarting the app i cant open the file

[jordangrant]

Solution based on the discussion: (tks for the hints guys)

const options = {
     title: 'Select Avatar',
     storageOptions: { skipBackup: true, path: 'images', cameraRoll: true, waitUntilSaved: true },
};

ImagePicker.showImagePicker(options, (response) => {
   var path = response.uri;
   if (Platform.OS === 'ios') {
      path = '~' + path.substring(path.indexOf('/Documents'));
   }

   if (response.didCancel) {
      console.log('User cancelled image picker');
   } else if (response.error) {
      console.log('ImagePicker Error: ', response.error);
   } else {
      this.changeAvatar(path);
   }
});

FYI this is the path before transforming it, and after it's just ~/Documents.....