After Image Uploading, image uri is null for iOS alone in React Native

Question

In my React Native app, I have added an functionality to upload multiple images, which will be stored as image[] including uri. This works perfectly for Android.

But for iOS, the image[] is created also contains some data but it is entirely different from android. And for uri null value only present.

Please help me to solve this issue.! (Note: Android should not get affected by change.)

Thanks in advance.!

Images Array: (For Android)

[
  { 'file': 'content://media/external/images/media/30993',
    'size': 125434,
    'uri': 'content://media/external/images/media/30993',
    'isDirectory': false,
    'md5': '041550fe959f36d1b247bb6b2eaa3272',
    'exists': true },
  { 'file': 'content://media/external/images/media/30988',
    'size': 541148,
    'uri': 'content://media/external/images/media/30988',
    'isDirectory': false,
    'md5': '39bf35dfcf0852c5412205195a395b29',
    'exists': true
  }
]

Images Array: (For iOS)

[
  {
    'file': 'assets-library://asset/asset.JPG?id=C2FBB68D-2012-4696-8648-D8990F72BF77&ext=JPG',
    'size': 125434,
    'modificationTime': 1552019118.1320686,
    'uri': null,
    'isDirectory': 0,
    'md5': '041550fe959f36d1b247bb6b2eaa3272',
    'exists': 1
  },
  {
    'file': 'assets-library://asset/asset.JPG?id=98EBA95A-254E-40F4-8E1D-C355D8795777&ext=JPG',
    'size': 541148,
    'modificationTime': 1552019117.7241733,
    'uri': null,
    'isDirectory': 0,
    'md5': '39bf35dfcf0852c5412205195a395b29',
    'exists': 1
  }
]

[Updated]

I need to get the absolute file path from this url 'assets-library://asset/asset.JPG?id=98EBA95A-254E-40F4-8E1D-C355D8795777&ext=JPG' , which is similar to 'content://media/external/images/media/30988'.

Please help me to resolve this issue.!

Thanks in advance.!

Answer 1

I had this exact same issue.

The solution is to set the uri to the 'file' attribute.

This is how you can append the image into formData correctly for both iOS and Android:

        let uri = image.file;

        // extract the filetype
        let fileType = uri.substring(uri.lastIndexOf(".") + 1);

        formData.append('uploads[]', {
            uri,
            name: `photo.${fileType}`,
            type: `image/${fileType}`,
        });

You can't remove the additional data on the iOS filename "?id=98EBA95A-254E-40F4-8E1D-C355D8795777&ext=JPG'" at this point, otherwise it won't upload. You can remove it at the server side though.