IOS posts empty image using mulitpart

[Sharique-Hasan]

I have been struggling with this for last 1 week.

This is what I pass to plugin:

[{"name":"IMG_0791.JPG","filename":"file:///var/mobile/Media/DCIM/100APPLE/IMG_0791.JPG","mimeType":"image/jpg"}]

Plugin creates some temporary file and uploads that. and after uploading to my server the file created is empty which my server further uploads to S3 bucket. this is what uploaded to S3:

https://s3.eu-central-1.amazonaws.com/bolgameshow/b72e2a18-fcd2-4b45-8d5f-f5752c3482b5_IMG_0791.JPG

Whereas Android is posting file perfectly fine.

[Sharique-Hasan]

here is the sample.

In this sample you can see the android app's consoling about the chunks being uploaded in the progress event. But in iOS it uploads eventually 100 all at once.

https://github.com/mrazahasan/imagePicker

[Sharique-Hasan]

In my original app's server the image comes empty. and from android it comes perfectly fine

[Sharique-Hasan]

Following are the required info Nativescript: 3.2.0 iOS version: 10.3.3 Simulator: 10.3.1

[lini]

I checked the project you posted and I think I found a simple solution. In the items.component.ts file, in the uploadMultipartImagePicker method, replace the line:

    let fileUri = image.fileUri;

with

    let fileUri = image.fileUri.replace("file://","");

If you are targeting Android as well, check if this also works there. If it doesn't - make the replacement conditional so it only happens on iOS.

For some reason, the iOS version of the plugin does not read the image file from storage if it begins with "file://" but has no problems if it is a normal path starting with "/".

[Sharique-Hasan]

I have already checked it by removing replace function too. And it didn't work either.

[lini]

Sorry I had a typo in the code I sent you. it should be:

  let fileUri = image.fileUri.replace("file://","");

(dot instead of comma before the replace)

Does it upload images on iOS this way? I tested it both in the iOS simulator and a real device (iPhone) and in both cases images were uploaded successfully.

[Sharique-Hasan]

Are you able to upload in this sample. The thing is that androis shows progress by consoling uploaded chunks and iOS post 100% in a moment of time which results in empty image posted on server. The thing you are saying for string replace, I have already tried it.

You can check this sample. Run it on android and ios and see the difference.

[Sharique-Hasan]

Can you provide me the sample app where you have uploading working in ios?

[lini]

I opened a pull request on the repository you sent - https://github.com/mrazahasan/imagePicker/pull/1

When I make this change in the project I am able to upload the images on iOS. I see the progress and if I change the server to a local one I can also see the files are uploaded correctly. Here is the log from the console:

[Sharique-Hasan]

Oh that is so great @lini. nativescript-background-http requires file uri. But nativescript-camera does not outputs any fileUri which could be used. I have already implemented the camera too. But I didn't get any fileUri in that. Did you ever try upload from camera?

[Sharique-Hasan]

@lini I tried your PR. It is perfectly uploading from Emulator but not from read device. I am not sure what is the difference between both. both are eliminating "file://" from fileUri

[Sharique-Hasan]

[Sharique-Hasan]

The first image is of emulator and 2nd of real device

[lini]

I see from https://github.com/mrazahasan/imagePicker/blob/2b51e8eb5c1dfe7b72e55faebd6a7cdddcb2ecb5/app/item/items.component.ts that you have been able to solve this on your own, so I will close this issue.