assets-library uri not matching .heic extension check, invalid for newJpgPath

[pascallaliberte]

When using react-native-image-picker, the uri to pass to the heic converter contains an assets-library:// uri which doesn't pass the .heic pathExtension check, and isn't valid to be with the newJpgPath.

Example path: assets-library://asset/asset.HEIC?id=CE542E92-B1FF-42DC-BD89-D61BB70EB4BF&ext=HEIC

Is there a better alternative than the react-native-image-picker?

Example output from react-native-image-picker

{
  "fileName": "IMG_5382.HEIC",
  "fileSize": 11907893,
  "height": 3024,
  "isVertical": false,
  "latitude": 45,
  "longitude": 123,
  "origURL": "assets-library://asset/asset.HEIC?id=CE542E92-B1FF-42DC-BD89-D61BB70EB4BF&ext=HEIC",
  "timestamp": "2018-05-09T12:41:26Z",
  "uri": "file:///Users/USERNAME/Library/Developer/CoreSimulator/Devices/########-####-####-####-############/data/Containers/Data/Application/########-####-####-####-############/Documents/########-####-####-####-############.jpg",
  "width": 4032
}

[maxim-kolesnikov]

@pascallaliberte thx for your report.

Why you need converted origURL? Could you tell me, why you don't want use uri as path to the local file asset on the device? I think react-native-image-picker have already converted your .HEIC image and I see that, the response object in your example already have .jpg path.

"uri": "file:///Users/USERNAME/Library/Developer/CoreSimulator/Devices/########-####-####-####-############/data/Containers/Data/Application/########-####-####-####-############/Documents/########-####-####-####-############.jpg",

Please, check some demo.

Maxim Kolesnikov.

[pascallaliberte]

You're right, uri does contains a legit .jpg variant. That solves the problem.

At first, I didn't trust that path, since I had uploaded it to our image server which returned empty images when trying to resize them. The image wasn't to blame, it was that I was sending the original fileName (with .HEIC) and/or original content-type provided by react-native-image-picker. We tweaked both to specify that it's a jpg, and its resize logic parsed the file adequately, returning the resized jpg.

Thanks for the tip and the demo.

[ospfranco]

I'm running into the same problem, on my case I don't have access to the absolute path.

[maxim-kolesnikov]

@ospfranco Hi, what is you version? You are trying work with assets-library://asset/?

[ospfranco]

hey, not sure which version you mean, so:

react-native: 0.53.3 heic-converter: 1.1.0

I'm getting the device photos using react-native's getPhotos, that only returns the assets-library uri and not the absolute path.

My workaround for now is to use react-native-fs to copy the image to the app documents folder and then I get a absolute path, but it is not ideal.

[maxim-kolesnikov]

@ospfranco thx, for your report. I reopen this issue and I'll try to fix it on weekends.

[mikefogg]

@maxim-kolesnikov running into the same problem as above, thanks for looking into this! The issue I'm running into is that I unfortunately only have the result from getPhotos to work with, so only the assets-library://asset/ version of the URL. The url ends up looking like assets-library://asset/asset.heic?id=4E8AFAAB-6105-4784-83AE-72269C1742D9&ext=HEIC which the converter doesn't seem to think is the correct url format.

Let me know if there's anything I can do to help! I've never built/worked on a react-native module, bu there's a first time for everything :)

[mikefogg]

@ospfranco not sure what you're looking for, but I put together a little GIST last night on how I was able to take the assets-library url and turn it into base64 encoded data that I needed to upload to the server. I won't say it's perfect :) But it works! The one issue I need to figure out is the orientation stuff. If you (or @maxim-kolesnikov) have any insight on that I'd love to fix it! Also @maxim-kolesnikov please feel free to check it out and see if it helps at all to get this component working with the asset-library stuff. That would be awesome :)

https://gist.github.com/mikefogg/a239a87d6c06c5e4f04d22825eaea061

[ospfranco]

@mikefogg still a workaround, due to time constrains and the fact that a lot of our infrastructure is already set up, I could not afford to play with base64 encoding, but glad to see it is working for you!

[maxim-kolesnikov]

@mikefogg, thank you for your contribution. Please reinstall your node_modules/ and try again with "react-native-heic-converter": "^1.1.1"

CC @pascallaliberte @ospfranco I did not properly test my solution pretty good, please let me know if you experiencing a problem again. Good luck of develop your applications!