File Upload or Transfer in Cordova plus ionic to server in angularjs

Many times in our mobile application we are required to upload or transfer files to server, although simply transferring files or uploading file can be easy task but in cordova one must follow the procedure provided by cordova. Multiple parameters are required to keep in mind like, what kind of form data or content you are going to post ie. multipart-form-data or application/base64 etc.

But keeping things simple we are going to post multipart-form-data and image application/base64. Don’t worry just forget these terms if you are newbie here, just follow the code steps and you will get the desired result.

Notice here that we are assuming you are ready with your api call to upload image, here we are focusing on uploading the image using the api call.

What you need:

You have to use : $cordovaFileTransfer plugin.

Prerequisite:

1- Taking photo via accessing camera in cordova, read our previous blog.

2- Or selecting picture from gallery

Generally we separate the service/factory and controller in angularjs but for simplifying the example we are combing them in controller.

For the better explanation i am commenting the code properly.

$scope.uploadFile = function() {

var targetPath = "path to your image";

$scope.targetPath = targetPath;

if ($scope.targetPath === undefined || $scope.targetPath === null) {

$ionicPopup.alert({

title: 'Error',

template: 'Kindly upload file first'

});

return false;

} else {

//You must checkout the options of FileTransfer on cordova documentation

var options = {

fileKey: "avatar";,

filename: filename,

chunkedMode: true,

mimeType: "image/png";

};

$cordovaFileTransfer.upload("your api call url”, targetPath, options)

.then(function(result) {

$cordovaToast.show('Your file uploaded successfully', 'short', 'bottom');

$state.go('stateName', {}, { reload: true });

$window.location.reload(true);

}, function(err) {

$cordovaToast.show(err.message, 'short', 'bottom');

});

}

};

For upload: upload(server, targetPath, options, trustAllHosts)

For better plugin explanations and usage please read out official documentation: here

Thanks !!