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.

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 !!

Written by 

Rachel Jones is a Solutions Lead at Knoldus Inc. having more than 22 years of experience. Rachel likes to delve deeper into the field of AI(Artificial Intelligence) and deep learning. She loves challenges and motivating people, also loves to read novels by Dan Brown. Rachel has problem solving, management and leadership skills moreover, she is familiar with programming languages such as Java, Scala, C++ & Html.

2 thoughts on “File Upload or Transfer in Cordova plus ionic to server in angularjs

  1. 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..

  2. How send image inside params? like
    $http({ method: ‘POST’, url: URL + ‘/user/new’,
    params: {
    name: user.name,
    avatar: user.avatar, <– AVATAR HERE
    email: user.email,
    password: user.password,
    password_confirmation: user.password_confirmation
    },
    headers: {
    "Content-Type": "application/vnd.api+json",
    "accept": "*/*"
    }
    })

Leave a Reply

%d bloggers like this: