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 
phonegap local plugin add
phonegap local plugin add
phonegap local plugin add
phonegap local plugin add

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.

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

  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

    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

  11. DLSnead January 22, 2015 at 2:38 am #

    Thanks for doing all this!!

    I just got this going in cordova 4.2.0 (changing mostly what you’d expect to have to change). Basically, I made an empty app with cordova CLI the usual way, Added the plugins listed above for this upload project with cordova CLI (tiny differences), Then simply clobbered the www dir cordova CLI makes for you, replacing it with your www dir from project’s git

    Had to move www/config.xml to config.xml (rel. to proj dir). … and replace phonegap.js in www/index.html with cordova.js .

    Server’s package.json needed minor patchin’ also:

    "express": "~3.0.0",

    "express-logger": "*",



    Mainly to use older (circa 2013) version of express because I was too lazy to touch your server.js code at this stage. Again: nothing unexpected, really.

    Reward: working on android! Yay!

    • Price October 11, 2015 at 7:10 am #

      Hey, thanks for submitting this update. Working on a phonegap/server setup at a hackathon and this was the light at the end of a dark tunnel. Ended up having to install nvm in order to use an older version of node (0.7.0) but other than that it all worked out.

  12. Bob April 23, 2015 at 2:42 pm #

    Does this work on IOS (iPad)?

    Also, can any kind of file be uploaded from IOS?

    Do the files to be uploaded need be stored under the hosting app?

  13. mynet chat May 6, 2015 at 5:59 pm #

    Yarbay work on Android 4.0.4.

  14. sohbet August 17, 2015 at 3:10 am #

    thanks for the post

  15. chat August 17, 2015 at 3:11 am #

    Schöne Aufteilung

  16. Boma October 10, 2015 at 3:52 pm #

    Where is the mongo db schema?

  17. futbol çorapları November 18, 2015 at 2:49 am #

    kalite,fiyat uygunlugu ve imalattan.profesyonel ekip eşliğinden güvenilir işler yapılmaktadır.

  18. antrenman malzemeleri November 18, 2015 at 2:59 am #

    kalite,fiyat uygunlugu ve imalattan.profesyonel ekip eşliğinden güvenilir işler yapılmaktadır.

  19. sohbet December 8, 2015 at 5:29 pm #

    duka baba affetmez.

  20. bhanu March 2, 2016 at 1:36 pm #

    i used it same not showing with scroller images not working in android,please help me out


  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) […]

  3. Node Weekly No.4 | ENUE - November 28, 2015

    […] How to Upload Pictures From A PhoneGap Application to Node.js […]

Leave a Reply