How to upload pictures from a PhoneGap Application to Node.js (and other servers)

You have seen the demos showing you how to access your camera and take pictures from a PhoneGap application. But these demos often end there, and a number of people have asked me for an end-to-end example showing how to take pictures and upload them to a server.

I created a simple app that I called Picture Feed. It shows you the last pictures uploaded by users, and lets you take pictures that are automatically uploaded to a server for other people to see.

In this sample app, I upload the pictures to a Node.js server, and I keep track of the list of pictures and associated information (if any) in a MongoDB collection. But the same approach would work with other server stacks.

Here is a short video:

Source Code

The client-side and server-side (Node.js) code is available in this GitHub repository.

In my next post I’ll modify this example to demonstrate how to upload pictures to Amazon S3.

This application was created with PhoneGap 3. Don’t forget to add the plugins required by the application:

phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git 
phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git
phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-file.git
phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-file-transfer.git
phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git

To test the application on iOS, make sure you modify the “widget id” value in config.xml and specify the namespace that matches your application provisioning profile.

13 Responses to How to upload pictures from a PhoneGap Application to Node.js (and other servers)

  1. eugene September 12, 2013 at 6:25 am #

    Thanks for sharing !
    Am testing on Android 4.1.2 with PhoneGap 3.0.0-0.14.1 and am getting an error when it tries to upload the picture taken.
    Anyone else experiencing this ? On the server, I see “Error: unrecognized content-type: multipart/form-data;boundary=+++++ at Form.parse (/PictureFeed/server/node_modules/express/node_modules/connect/node_modules/multiparty/index.js:106:17)”

    I thought maybe my node server isn’t set up correctly but I do get the “PictureFeed server listening on port 3000″ message on starting it.

  2. eugene September 12, 2013 at 8:04 pm #

    Noticed it works fine on iOS though.

  3. Peter September 13, 2013 at 1:16 am #

    Thanks a ton for sharing this, Christophe! Perfect timing for my current project.

  4. Ian Powell September 13, 2013 at 8:39 pm #

    I have been having this problem for a while. It seems that my cameraSuccess function of getPicture is only successful after the second photo is snapped. An image of the first photo snapped will be placed in the feed however. I have a stackOverflow question with and have not found a solution. Anyone else have trouble with this. I tried this on two android phones.

    http://stackoverflow.com/questions/18650715/phonegap3-0-0-camera-not-successful-on-first-try

  5. Abhas Tandon October 1, 2013 at 3:00 am #

    thanks for the post…. I am working on a phonegap app that can connect to a nodejs server and allow the use of mobile device as input media. Your post really boosted my moral.

  6. Igor January 28, 2014 at 11:56 am #

    Hi.Could could You please provide with step-by-step instructions on how to build an app.
    I’ve started the server manually,but nothing happened on the client – no Camera opened on Android device Google Nexus 4

    Thanks in advance

  7. kilim March 24, 2014 at 5:12 am #

    thanks for the post….

  8. sumbal May 30, 2014 at 6:22 am #

    phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git

    when i install this plugin i receive an error git command line tool is not installed meke sure it is accessible on your path .
    how to solve this problem ?

  9. Hayley Giovinco June 21, 2014 at 1:40 am #

    This is a good tip particularly to those new to the blogosphere. Simple but very precise information

  10. Johanna July 13, 2014 at 9:01 pm #

    I see a lot of interesting content on your page. You have to spend a lot of time writing, i know how to
    save you a lot of work, there is a tool that creates unique,
    google friendly articles in couple of seconds, just search in google – k2 unlimited
    content

Trackbacks/Pingbacks

  1. How to Upload Pictures from a PhoneGap App to Amazon S3 | Christophe Coenraets - September 16, 2013

    [...] my previous post, I shared a sample application demonstrating how to upload pictures from a PhoneGap application to [...]

  2. Node.js and Mobile News Round-up – September 10, 2013 | StrongLoop - September 17, 2013

    [...] How to upload pictures from a PhoneGap Application to Node.js (and other servers) [...]

Leave a Reply