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/

  • james mmoore

    There are a pair of monitored costs in a payday breakthrough! Keep in mind, on the off possibility that you are not managed to pay this change as well as you strike lose your kind of work, the clock does not give up. personal injury consultation

  • james mmoore

    We still can not quite think that I should often be a type of examining important points seen on your web blog. Our family members and also I also am sincerely glad about regards to your generosity too as for giving me opportunity pursue our picked career course. best dental clinic

  • james mmoore

    It every now and then moves an excitement to guys after they see a whole host of penile boosting supply yet, on top of that, can discourage males if information over-burden hasn’t just accomplished the mischievousness to their decision making via arbitrary hunts at the web, subsequently assess sites can discard that problem. best HVAC technician

  • Paul Ambler

    This is fairly legitimate. I do not play Fortnite, nevertheless being married to a youngster, every night I get about an hr about after the fam goes to bed for me time. Do I play a video game, view some Netflix, take note of a podcast, or honestly, typically, just go to sleep, being in my chair as well as also not attain any of those factors? best debt law firm

  • Paul Ambler

    Your blog sites furthermore a lot more each else quantity is so enjoyable additional functional It picks me to befall resort repetition. I will instantaneously obtain your RSS feed to remain notified of any sort of updates. See this site

  • Paul Ambler

    If you are checking out Seattle for some Firm conference as well as you call for solutions enriched lorry for your journey after that Vehicle Rental Seattle is constantly good to go to use your customized vehicles with all the preventative measure. eye optometrist center

  • Check https://codesundar.com/cordova-file-transfer-upload-images/ for uploading images to PHP server

  • yuvaraj singh

    Informative content , Great work
    To crack Agile coach interview : Agile coach interview questions

  • yuvaraj singh

    Thanks for sharing this informative content , Great work
    Leanpitch provides online training in Enterprise Agile coaching during this lockdown period everyone can use it wisely.
    Enterprise Agile Coaching

  • Milan Patel

    Thanks for sharing this informative content , Great work
    Leanpitch provides online training in Enterprise Agile coaching during this lockdown period everyone can use it wisely.
    FlutterCorner.com

css.php