Adding file upload feature in your phoneGap application
While working on a hybrid mobile application, I came to know a very interesting feature wherein I need to add a functionality to upload images/videos/all media type files to any server.
The first thing that came upto in my mind is using input[type=file] of HTML5 as it is very easy to use and gives lot of features inbuilt(like mutiple files upload).
Above solution becomes a nightmare when I created a build for Android as well as IOS and it worked only on IOS. I did some research and found that it only works for IOS not on Android devices.
After doing some more research, I found that this can be done using file API of cordova that access file systems for devices. It is very important how you want your file to be read and uploaded. There can be scenarios:
- You want your file's data as binary or base64Encoded string in your code.
- Or directly upload it to another server.
In my case, I choose the first way of doing as I needed few information out of it before uploading it to another system.
Both scenarios can be implemented in somewhat same way in first step but uses different API objects in second step. These are mentioned below:
Step 1: We need to use navigator.camera.getPictures method that will allow us to select a file from gallery and will give us the url of file on selection.
Step 2: We need to decide what to do with file either to read it or upload it to server. Both options can be done by following:
File Reader : Use this, to read any file and get its data in binary or text or base64encoded string and then use it in your application for further processing.
File Transfer : use this, to upload or download file from/to any server. It gives you some options to be send along with the file.
Hope this helps while making solutions for the feature.
If anyone needs any help on this, send me an email directly. Happy to help!
Related Posts:
Making file upload feature for your PhoneGap app.
Getting issues in reading videos' url in IOS + PhoneGap App.