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

September 10, 2013 in MongoDB, Node.js, PhoneGap, Topcoat

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.

  • eugene

    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.

  • eugene

    Noticed it works fine on iOS though.

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

  • Ian Powell

    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

  • Pingback: How to Upload Pictures from a PhoneGap App to Amazon S3 | Christophe Coenraets()

  • Pingback: Node.js and Mobile News Round-up – September 10, 2013 | StrongLoop()

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

  • Igor

    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

  • thanks for the post….

  • sumbal

    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 ?

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

  • 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

  • DLSnead

    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 master.zip

    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": "*",

    "method-override":"*",

    "body-parser":"*",

    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

      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.

  • Bob

    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?

  • Yarbay work on Android 4.0.4.

  • thanks for the post

  • Schöne Aufteilung

  • Boma

    Where is the mongo db schema?

  • kalite,fiyat uygunlugu ve imalattan.profesyonel ekip eşliğinden güvenilir işler yapılmaktadır.http://jonsunsport.com/spor-coraplari.html

  • kalite,fiyat uygunlugu ve imalattan.profesyonel ekip eşliğinden güvenilir işler yapılmaktadır.http://jonsunsport.com/antrenman-malzemeleri.html

  • Pingback: Node Weekly No.4 | ENUE()

  • duka baba affetmez.

  • bhanu

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

  • Thanks for tutorial, I found some simple & useful article for uploading images to php server http://phonegappro.com/tutorials/upload-images-to-server-using-phonegap-file-transfer-plugin/

css.php