iOS: Upload encounters "Invalid URL server" with DATA_URL destinationType

[heyypatrick]

Bug Report

fileTransfer.upload(...) returns an error with a DATA_URL destinationType. Works well with Android.

Problem

I've been working on an upload function but fileTransfer.upload(...) returns an error when attempting to upload an image using an API.

What is expected to happen?

Upload data with image successfully to a remote server.

What does actually happen?

File Transfer Error: Invalid server URL ENDPOINT [696:88559] FileTransferError { code = 2; source = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QBYRXhpZgAATU0AKgAAAAgAAgESAAMAAAABAAYAAIdpAAQAAAABAAAAJgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAFAKADAAQAAAABAAADwAAAAAD/7QA4UGhvdG9zaG9wIDMuMAA4QklNBAQA...

Information

I'm using this with Ionic 5.

Command or Code

` .this.camera.getPicture(cameraOptions).then((imageData) => {

                  this.yourImage = 'data:image/jpeg;base64,' + imageData;

                  const endPoint = API_ENDPOINT;

                  fileTransfer.upload(this.yourImage, endPoint, options)
                    .then(
                      (data) => {
                        this.dismiss();

                        $('.on-success').show();
                            ...
                      },
                      (err) => {
                        this.dismiss();
                        this.presentAlertConfirm(JSON.stringify(err));
                  });
                  this.dismiss();
                }, (err) => {
                    this.dismiss();
                    this.presentAlertConfirm(JSON.stringify(err));
                });`

Environment, Platform, Device

Testing on iPad mini 2 with iOS version 12.3.1.

Version information

• MacOS Mojave 10.14.6
• XCode 11
• Ionic 5.4.2
• Cordova 9.0.0
• Node 6.9.0

Checklist

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

[breautek]

Invalid server URL states that the server URL is invalid for some reason.

With the server URL obfuscated we cannot really say why that might be.

Double check that your server url is valid. Are you able to use API via another developer tool such as postman?

[heyypatrick]

Invalid server URL states that the server URL is invalid for some reason.

With the server URL obfuscated we cannot really say why that might be.

Double check that your server url is valid. Are you able to use API via another developer tool such as postman?

The server URL is valid because it's working on Android. One of the thing that makes it harder is that it doesn't return any error on the server. It returns ERROR CODE = 2 which means INVALID_URL_ERR but works well Android.

[johnjackson]

the second parameter of upload should use encodeURI(), for example: fileTransferObj.upload(fileObj.file_path, encodeURI(uploadURL), options).then((res) => { observer.next(res); }, (err) => { this.toast.showToast(err, 2000); }).catch((e) => {}); see docs

[heyypatrick]

the second parameter of upload should use encodeURI(), for example: fileTransferObj.upload(fileObj.file_path, encodeURI(uploadURL), options).then((res) => { observer.next(res); }, (err) => { this.toast.showToast(err, 2000); }).catch((e) => {}); see docs

Wow! It's almost a year and I'm still stuck in this problem. Had to work on a workaround to fix this issue. I will surely try this one thank you, @johnjackson !