Camera Images fail to upload on iPhone

[obkdev]

Bug Report

Problem

What is expected to happen?

I'm able to successfully upload an image selected from library. I expect to capture an image and successfully upload an image from the camera in the same way as the library selection.

What does actually happen?

When I select camera and upload image from the camera I always get a 500 error. However, the image never makes it to my server so there isn't an error on the server side.

Information

Command or Code

else if (this.platform.is('ios') && sourceType === this.camera.PictureSourceType.CAMERA) {
                console.log('iPhone camera!');

                var currentName = imagePath.substr(imagePath.lastIndexOf('/') + 1);
                var correctPath = imagePath.substr(0, imagePath.lastIndexOf('/') + 1);
                let fileTransfer: FileTransfer = new FileTransfer()
                let options: FileUploadOptions = {
                    fileKey: 'image',
                    fileName: currentName,
                    chunkedMode: false,
                    headers: {
                        "Application": "MyApp",
                        "Authorization": "Bearer " + localStorage.getItem(StorageKey.AccessToken)
                    }
                }
                fileTransfer.create().upload(normalizeURL(imagePath), encodeURI(this.uploadLink), options, true).then(result => {
                    console.log('File transfer result: ', result);
                }).catch(err => {
                    console.log('Error with file transfer: ', err);
                });
            }

Environment, Platform, Device

iPhone XR iOS: 12.3.1

Version information

Ionic:

Ionic CLI : 5.2.1 (/usr/local/lib/node_modules/ionic) Ionic Framework : ionic-angular 3.9.5 @ionic/app-scripts : 3.2.2

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1) Cordova Platforms : ios 5.0.1 Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, (and 27 other plugins)

Utility:

cordova-res : not installed native-run : 0.2.7

System:

Android SDK Tools : 26.1.1 (/Users/travis.bradfield/Library/Android/sdk) ios-deploy : 1.9.4 ios-sim : 8.0.1 NodeJS : v10.15.0 (/usr/local/bin/node) npm : 6.9.2 OS : macOS Mojave Xcode : Xcode 10.2.1 Build version 10E1001

Checklist

• [x] I searched for existing GitHub issues
• [ ] I updated all Cordova tooling to most recent version
• [x] I included all the necessary information above

[janpio]

A 500 error by definition comes from the server. Where are you seeing this error?

[obkdev]

I agree with you.. I'm seeing this error in the console logs from my ionic app. When I check my server logs there is no record of any connection.

[janpio]

Please post a screenshot of your console and network panel in the remote debugging session. (https://ionic.zone/debug/remote-debug-your-app)

[obkdev]

I've posted a screen shot of my console. And When I watch the network tab when running the upload there is zero network activity.

[obkdev]

[janpio]

That's strange - will have to look further into this.

Is this reproducible in a new, plain Cordova app? A minimal reproduction repository would really help to debug and later fix this issue. More information on how to create one: https://github.com/apache/cordova-contribute/blob/master/create-reproduction.md

Ionic app works as well if you are not comfortable building a plain Cordova app.

[obkdev]

Very strange. Running the same app on an android device works perfectly fine! Just iPhone doesn't play ball.

I'll try a fresh ionic app and update you.

[janpio]

Android vs iPhone is actually not surprising, very different security requirements on the webviews.

[heyypatrick]

I am currently experiencing this error with this issue Any fixes for this?

[breautek]

I am currently experiencing this error with this issue Any fixes for this?

Http status code 500 means Internal Server Error. This means something went wrong on the server. The actual reason is unknown and there should be a server log. You may need to dig through a lot of logs, for example if you have a rest webserver application behind a reverse proxy, well then you'll likely have two separate log files, one for your backend rest application and one for your reverse proxy. It's hard to give specific details because this obviously depends on how your servers are configured.

Also to be clear, I'm not saying the server is at fault. The client could be doing something that the server just simply doesn't expect. But without an actual error message it will be hard to give any recommendations or to provide any solutions.

[heyypatrick]

I am currently experiencing this error with this issue Any fixes for this?

Http status code 500 means Internal Server Error. This means something went wrong on the server. The actual reason is unknown and there should be a server log. You may need to dig through a lot of logs, for example if you have a rest webserver application behind a reverse proxy, well then you'll likely have two separate log files, one for your backend rest application and one for your reverse proxy. It's hard to give specific details because this obviously depends on how your servers are configured.

Also to be clear, I'm not saying the server is at fault. The client could be doing something that the server just simply doesn't expect. But without an actual error message it will be hard to give any recommendations or to provide any solutions.

Well in my case I'm not quite sure if it's an error 500. The backend error logs are empty. My only clue is that from Xcode it returns only INVALID_SERVER_URL. Though it works well with Android. I've been debugging this for days and no good. Referencing this issue

[breautek]

Well in my case I'm not quite sure if it's an error 500. The backend error logs are empty. My only clue is that from Xcode it returns only INVALID_SERVER_URL.

Then it doesn't look like it's related to this issue.

[jenny-the-boss-69]

Hi guys I am having a (maybe) related issue on IOS only, where by when I upload an image to my API the url is being double encoded and hence my API is erroring becuase the file-type is completley invalid. This only started happening roughly at the beginning of November on new builds and in wandering if this plugin is the culprit?

Implementation: /image-upload?${qs.stringify({ fileName, contentType })}

Expectation (Browser and Android): '/image-upload?fileName=file.jpg&contentType=image%2Fjpeg'

Result on IOS: '/image-upload?fileName=file.jpg&contentType=image%252Fjpeg'

[HerickRaposo]

I am also having it with the fileTransfer, when I send an image it accepts sending normally, when sending in pf format it reaches 99 percent of sending and returns 500 error, detail that I "taught" the server to understand pdf files