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


 

iMany 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)

param Type Detail
server String URL of the server to receive the file
targetPath String Filesystem url representing the file on the device
options Object Optional parameters
trustAllHosts Boolean If set to true – accepts all security certificates

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

Thanks !!

About Nikhil Kumar

Software Consultant at Knoldus Software LLP.
This entry was posted in cordova, Ionic Framework, Scala and tagged , , , , , . Bookmark the permalink.

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

  1. shridar says:

    how to upload a doc file…we are going to send doc through form-data.
    key: resume value:”path of the file”
    thanks in advance..

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s