[iOS] ImageResizer / Message: Image uri invalid

[ggunti]

I use the following uri (obtained from camera): /var/mobile/Containers/Data/Application/6DCA648B-3E9E-4535-AC2C-20AA90F17681/Library/Caches/RNRectangleScanner/O1663320548.jpeg

imageWidth and imageHeight are set properly. Rotation is set to multiples of 90 (0, 90, 180 or 270).

But when I call

    createResizedImage(this.props.imageUri, imageWidth, imageHeight, 'JPEG', 100, this.state.rotation, undefined, false, {
      mode: 'stretch',
      onlyScaleDown: true,
    })

I get the following error:

What could cause this? Why the uri is considered invalid? Same happens when I try to use a remote uri. On android it works perfectly.

"@bam.tech/react-native-image-resizer": "^3.0.0",
"react": "17.0.2",
"react-native": "0.68.2"

EDIT: I tried to add "file://" at the beginning of the uri and it did not crash anymore. But the resulted image is not as expected when rotation is different from 0. On android works perfectly also with rotation.

[taboulot]

@ggunti

Thank you for your feedback. I'll take some time tomorrow or next week in order to give you a proper answer.

Until then, do not hesitate to give me the result of your investigation. It will help us for sure :)

[logicbuzzchirag]

Use file:// before your uri

use this type:

file:///var/mobile/Containers/Data/Application/6DCA648B-3E9E-4535-AC2C-20AA90F17681/Library/Caches/RNRectangleScanner/O1663320548.jpeg

[kueda]

FWIW, it might help a bit if https://github.com/bamlab/react-native-image-resizer/blob/master/ios/ImageResizer.mm#L46 raised something with the localizedDescription of the error instead of the generic Image uri invalid, particularly considering the documentation specifically says the argument is supposed to be a path or an encoded image string, not a URI.

[ggunti]

@logicbuzzchirag @kueda See the "EDIT" section of my previous comment. I solved the error, but the rotation does not work properly on iOS.

[HugoGresse]

Just tested both versions, and this is a regression compared to version 1.4.5. Where before plain path like /users/etc worked, now it need to be an URI.

[ggunti]

yes, we can add 'file://' before, but the problem is that rotation isn't working properly on iOS

[HugoGresse]

rotation is probably another issue. I think this issue can be closed either:

• changing the release not to add the breaking change
• patching it in this library.

[taboulot]

Hi folks 👋

Indeed I introduced a regression during the migration.

I do not feel comfortable with how you access files on iOS. The difference between path, URL, etc... is not crystal clear in my mind.

I think this should help to support both path and URI : https://gist.github.com/taboulot/2a56c43dd27479c31beb2066a1f803cd

I have tested it in the example project, which uses URI, and it works well. @ggunti Can you apply this patch on your project that use path and tell me if it fixes the problem?

[YousefED]

I'm also getting the same error for photos:// uris on iOS, which worked on a previous version of this library

[nicolasdevienne]

Hi @taboulot! It works for me! @ggunti can you confirm please?

[nicolasdevienne]

Hi @taboulot! It would be great to correct this issue to use the new lib :) Thx!

[astecpaint]

In version 1.4.5 it works fine with path [ph://]. However, with version 3.0.4 it cannot work. Is there any good solution?

[nofacez]

Updated to 3.0.4 and faced the same issue. Trying to resize photos taken with react-native-vision-camera results in an 'Image uri invalid' error. Image path starts with /private/var/mobile.... Adding file:// before it fixes the issue. Is this a problem with resizer or camera?

[hungtd97]

I used remote link (ex: https://www.nsbpictures.com/wp-content/uploads/2018/06/photo-frames-png-6-881x1024.png) or base64 with the right format but still got this issue

[zhiqingchen]

Is file:// necessary?

[forkball]

Having this issue come up in my project. Will a fix for this be rolled into the package?

The workaround mentioned above regarding the appending of file:// seems to work, but an explanation as to why this works would be appreciated.

[JoshWalshaw]

I'm also getting this exact same error when passing a correctly encoded base64 string for the URI param - We've upgraded to the bam package from the previously maintained one and since the upgrade this error has occurred.

I can also confirm that the base64 string is valid as when applying the same string to the web, the image shows perfectly fine.

[FibreFoX]

For anyone that wants to apply the solution provided by @taboulot in form of a patch-package compatible file, create the file patches/@bam.tech+react-native-image-resizer+3.0.5.patch with the following content:

diff --git a/node_modules/@bam.tech/react-native-image-resizer/ios/ImageResizer.mm b/node_modules/@bam.tech/react-native-image-resizer/ios/ImageResizer.mm
index 694f8ba..45d049c 100644
--- a/node_modules/@bam.tech/react-native-image-resizer/ios/ImageResizer.mm
+++ b/node_modules/@bam.tech/react-native-image-resizer/ios/ImageResizer.mm
@@ -39,7 +39,8 @@ RCT_REMAP_METHOD(createResizedImage, uri:(NSString *)uri width:(double)width hei
                 [NSException raise:moduleName format:@"Invalid output path."];
             }

-            NSURL * fileURL = [[NSURL alloc] initWithString:uri];
+            NSURL *baseURL = [NSURL fileURLWithPath:@"file://"];
+            NSURL * fileURL = [[NSURL alloc] initWithString:uri relativeToURL:baseURL];

             NSError *err;
             if ([fileURL checkResourceIsReachableAndReturnError:&err] == NO){

[canpoyrazoglu]

Any updates on this? I'm trying to give a Photo library path directly on iOS but it's crashing. I also need rotation to stay as-is so "file://" prefix workaround wouldn't work either.

[ericmatlock]

Any updates on this? I'm trying to give a Photo library path directly on iOS but it's crashing. I also need rotation to stay as-is so "file://" prefix workaround wouldn't work either. I also tried the `ImageResizer.mm patch with no success.

I am having the same issue. Actually, no matter whether I used uri or base64 this release would give the invalid URI error. I tried prepending on base64 Once I downgraded to 1.4.5 everything worked as expected.

initial uri: ph://05D3ED1F-C94A-4025-8950-E1C31BC4EA20/L0/001 1.4.5 success 3.0.5 fail altered uri: file://05D3ED1F-C94A-4025-8950-E1C31BC4EA20/L0/001.jpeg 3.05 fail base64 format: data:image/jpeg;base64,/9j/... 3.05 fail

[pribeh]

The solution here posted by @taboulot only works for the default native ios or android picker libraries. If you use the cameraroll library then it adds ph:// in front of the uri (asset.image.uri) and fails.

https://github.com/react-native-cameraroll/react-native-cameraroll

[vicrac]

How can such a critical issue not be resolved for almost a year?

[CMLCNL]

You would be expected to resolve such a critical error. It's been almost 1 year. Files starting with ph currently don't work in 3.0.5 Unbelievable. Good luck with your effort, but you'd better take a look now?

[jp-23]

I also cannot get this to work with uri values prefixed with ph://. I am using @react-native-camera-roll/camera-roll to select images and that package provides the image uri prefixed with ph://. An example of the full format is ph://ABC-123/A0/001.

I tried to edit the uri to instead prefix with file://, but that does not work, i still get the error.

@taboulot am I understanding correctly that the bamlab version of react-native-image-resizer (version 3.0.5) is not compatible with @react-native-camera-roll/camera-roll, and the only way I can use @react-native-camera-roll/camera-roll is to use the old non-bamlab version of react-native-image-resizer (version 1.4.5) which is depricated? I can confirm that version 1.4.5 still does work with @react-native-camera-roll/camera-roll with the ph:// format.

[taboulot]

Hi there,

I had time to fix the initial problem in the following PR: #381.

The problem was initially introduced by me during a refactor. Major problems with absolute path (using react-native-vision-camera) or different uri providers (like react-native-image-picker & @react-native-camera-roll/camera-roll) have been fixed.

There is still an issue with uri starting with ph://, but it looks like it is related to ReactNative. You can take a closer look at the PR. Help/PR on this subject is welcome.

I'm actually waiting for internal reviews and then I will release it (in 1-2 days).

You can still pull the branch to test it on your project & give me some feedback directly inside the PR.

---

📣 One last word. @vicrac & @CMLCNL I understand your frustration about the time it took for me to solve this & I am very sorry about that. However, as you may have noticed, this repository is open source & totally free. That means BAM and/or me are taking/investing time in it during professional/personal time depending on priorities we have. Open source is only working with the help, vision, contribution, etc... of people. And tools like Github are perfectly designed for that. Next time, feel free to investigate, fork, and create a minimal example repository. It will help a lot.

[CMLCNL]

Thank you so much. You are a hero. @taboulot

[rcase100]

Can't you just prepend "file://" to your path when calling ImageResizer.createResizeImage() in your client code (instead of depending on the library to do it)? That works for me in iOS, but haven't tested Android yet.

[taboulot]

@rcase100 I thought about doing it. But If I do that it will introduce again the issue with camera-roll library that return an uri starting with ph://. I prefer to use the solution we had before v3.x.x until I fully understand how uri works on both iOS & Android :)

[taboulot]

Fix released in 3.0.6

[pycxxx]

@taboulot rotation still not working on ios. I'm using 3.0.7

[taboulot]

Hi @pycxxx,

This issue was not about this subject. Can you please create a dedicated issue with reproduction step / minimal example ? You can fork this repository (update the package on the correct version), reproduce the bug & add it to the issue. Will help us a lot for the investigation.

Thank you !