React-native-image-picker: Heic format

[dlochynski]

Is there any way to deal with .heic images selection on the iPhones? I can't currently even pick them.

[b-d055]

Hi @dlochynski I got around this problem by noticing that all images have an uri (response.uri) that ends with .jpg. Even those images with a .heic file format and fileName. I simply use this .jpg uri when I want to do something with the image, including uploading to an API endpoint.

[dlochynski]

I must've ommited that. It was quite confusing for me that the format was different than the response.uri. Thanks a lot.

[AlMel3000]

Hi!
Somewhy iOS converts HEIC to jpg and MOV to mp4
So as I need uncompressed and uncchanged file I did so:

` _selectImage() {

    const options = {
        noData: true,
        quality: 1,
        mediaType: 'mixed',
        videoQuality: 'high',
        permissionDenied: {
            title: LocalisationHandler.getAppLocale().permission_denied_title,
            text: LocalisationHandler.getAppLocale().permission_denied_message

        }
    };

    ImagePicker.launchImageLibrary(options, (response) => {
        console.warn('ImagePicker RESPONSE = ', response);

        if (response.didCancel) {
            console.warn('ImagePicker User cancelled image picker');
        }
        else if (response.error) {
            console.warn('ImagePicker Error: ', response.error);
        }
        else if (response.customButton) {
            console.warn('ImagePicker User tapped custom button: ', response.customButton);
        }
        else {
            let path;
            let uri = response.uri;
            let origURL;
            let imageName = response.fileName;
            if (Platform.OS === 'ios') {
                path = null;
                origURL = response.origURL;
                isIosImage = true;
            } else {
                path = response.path;
            }
            this.processFile(path, uri, imageName, origURL)
        }
    });

}

processFile(path, uri, fileName, origURL) {
    if (path !== null) {
        RNFS.hash(path, 'sha512')
            .then((result) => {
                this.doSomeWork(result, fileName);
            });
    } else {
        RNFS.copyFile(uri, `${RNFS.TemporaryDirectoryPath}${fileName}`);
        RNFS.copyFile(origURL, `${RNFS.TemporaryDirectoryPath}${fileName}`);
        path = `${RNFS.TemporaryDirectoryPath}${fileName}`;
        console.warn('path : ', path);

        RNFS.hash(path, 'sha512')
            .then((result) => {
                this.doSomeWork(result, fileName);
                    this.deleteTemporaryFile(path)

            });
    }
}`

It's not a perfect solution but it works for me

[aguscha333]

Thanks @b-d055 ! I was having issues uploading this type of file to the server I though I needed to convert the image to JPEG but as you said the picker already provides the uri with the image in that format and that made me look elsewhere.
Just in case you are using the uri and still having problems with the upload I wanted to share what my problem actually was.

So although the uri has a JPEG file, the fileName provided by the response ended in .HEIC and I was using that to deduce the file type I was sending.
So either because of the name or type I was providing to the server (using multipart to upload), it got rejected for being heic when it actually wasn't.

I changed the filename extension to match the one provided by the uri and deduced the type from that instead and it worked.