Multi part form-data image upload using cordova-file-transfer plugin in ios fails - ios

Question

I have to upload an image to server using multi-part image upload from my ionic project. Here is my code,
$scope.uploadImage = function(imageUrl) {
var fileName = imageUrl.substring(imageUrl.lastIndexOf('/')+1);
var json= {
"id":123,
"name" :fileName
}
var fileUploadOptions = new FileUploadOptions();
fileUploadOptions.fileKey="file";
fileUploadOptions.fileName = fileName;
fileUploadOptions.params = {
json : json
};
fileUploadOptions.mimeType="image/jpeg";
var URL = 'http://192.168.43.7:8080/services/uploadImage'
var encodedURI = encodeURI(URL);
console.log('fileUploadOptions : ',fileUploadOptions);
var ft = new FileTransfer();
ft.upload(imageUrl, encodedURI, onSuccess, onError, fileUploadOptions, false);
function onSuccess(response){
console.log('file uploaded: ',response);
}
function onError(error){
console.log('upload failed',error);
}
}
I am using the following plugins
cordova-plugin-file
cordova-plugin-file-transfer
cordova-plugin-camera
My image capture code is
$scope.takePhoto = function() {
var options = {
quality: 75,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: 1,
allowEdit: false,
encodingType: 0,
targetWidth: 1280,
targetHeight: 720,
popoverOptions: CameraPopoverOptions,
direction: 1,
saveToPhotoAlbum: true
};
var cameraSuccess = function(imageData) {
onPhotoURISuccess(imageData);
function onPhotoURISuccess(imageURI) {
createFileEntry(imageURI);
}
function createFileEntry(imageURI) {
window.resolveLocalFileSystemURL(imageURI, copyPhoto, fail);
}
function copyPhoto(fileEntry) {
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSys) {
fileSys.root.getDirectory("photos", { create: true, exclusive: false }, function(dir) {
var fileName = 12 + "_" + 56 + "_" + 67 + ".jpg";
fileEntry.copyTo(dir, fileName, onCopySuccess, fail);
}, fail);
}, fail);
}
function onCopySuccess(entry) {
console.log('Full path: ', JSON.stringify(entry));
var path = entry.toURL();
$scope.imageUrl = path;
console.log('imageUrl: ',$scope.imageUrl);
}
function fail(error) {
console.error(JSON.stringify(error));
var cause = "";
if (error.code == 20) {
cause = "Camera permission denied"
}
}
}
var cameraError = function(error) {
console.log('camera error: ', error);
}
navigator.camera.getPicture(cameraSuccess, cameraError, options);
}
I am passing the $scope.imageUrl variable to upload function.
The code works fine in android devices.
But iOS, the upload fails.
I am getting
com.fasterxml.jackson.databind.JsonMappingException: No content to map due to end-of-input
error in my server console.
In my device console I am getting the following error,
upload failed
body: "An error has occurred. Please contact system administrator."
code: 3
exception: null
http_status: 500
source: "file:///var/mobile/Containers/Data/Application/8C4518AC-5606-4806-A8D2-216125EFE725/Documents/photos/12_56_57.jpg"
target: "http://192.168.43.7:8080/services/uploadImage"
The message in the body of the error is from my server.
As per the error I get from server, I came to know that, the JSON part is not getting uploaded to server. I tried to recreate the same issue with postman without sending the JSON object. I got the same error.
Do anyone know what is the issue ? Why only in iOS device this issue is there ?

Answer 1

From the docs:
params: A set of optional key/value pairs to pass in the HTTP request. (Object, key/value - DOMString)
Try using fileUploadOptions.params = { json : JSON.stringify(json) } instead.

Answer 2

var imageUrI="file:///storage/emulated/0/newfile.csv";
var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1);
options.mimeType = "image/jpeg/csv";
var params = new Object();
params.value1 = "test";
params.value2 = "param";
options.params = params;
options.chunkedMode = false;
var ft = new FileTransfer();
ft.upload(imageURI, "http://fileupload/admin/add_image_my.php",
function (result) {
console.log(JSON.stringify(result));
},
function (error) {
console.log(JSON.stringify(error));
}, options);