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