Upload multiple images in Phonegap with PHP

One of the most important “action” in a mobile app (native or hybrid) is upload your shoot to a server.
With this post I’ll show you how the needed code to make a shoot in a Phonegap/Cordova app, retrieve your image and upload it (or them) to the server at last.
About this post I was inspired by a good example  from Ray Camden .

First of all you need some plugins to manage media promises (the photo shoot) in Phonegap/Cordova.

Here it’s what you need:

1. cordova-plugin-camera (cordova plugins add cordova-plugin-camera)
2. cordova-plugin-file (cordova plugins add cordova-plugin-file)
3. cordova-plugin-file-transfer (cordova plugins add cordova-plugin-file-transfer)

Consider this simple HTML code:

<button onclick=”getPicture()”>Get Picture</button>

The JS function getPicture will be:

var camera.images=[];
function getPicture(){

navigator.camera.getPicture(onSuccess, onFail, {

quality: 50,
destinationType: Camera.DestinationType.FILE_URI
});

function onSuccess(imageData) {
camera.images.push(imageData);
fileName=imageData.substr(imageData.lastIndexOf(“/”)+1 ,imageData.length);
var img=”<img src='”+imageData+”‘>”;
document.getElementById(“imgContainer”).innerHTML(img);
console.log(camera.images);
}

function onFail(message) {
// something went wrong
}

}

The code is very net and clean. Through the camera object you’re allowed to open the mobile camera. After the shoot the media promises will shown by the img tag added into an hypothetical tag “imgContainer”.

Now (assuming we have another button) with this HTML code:

<button onclick=”uploadAll()”>Upload All</button>

we’ll upload all the images.

console.log(“Ok, going to upload “+camera.images.length+”);
var defs = [];
camera.images.forEach(function(i, index) {
console.log(‘processing ‘+i);
var def = $.Deferred();
var uri = encodeURI(main.server_path+”uploadImages.php”);

var options = new FileUploadOptions();
options.fileKey=”file”;
options.fileName=i.substr(i.lastIndexOf(‘/’)+1);
options.mimeType=”image/jpeg”;
options.params={index:index};

var ft = new FileTransfer();
ft.upload(i, uri, win, fail, options);
defs.push(def.promise());

function win(r) {
console.log(“upload done”);
console.log(r);
if($.trim(r.response) === “0”) {
console.log(“this one failed”);
def.resolve(0);
} else {
console.log(“this one passed”);
def.resolve(1);
}
}

function fail(error) {
console.log(“upload error source ” + error.source);
console.log(“upload error target ” + error.target);
def.resolve(0);
}

});

$.when.apply($, defs).then(function() {
console.log(“All images updated”);
console.log(arguments);
});

The code is long enough but readable. We read all the images in the camera object. Each photo are sent to the php file uploadImages.php.

At last we check if the upload is right or wrong (win/fail methods).

The last jQuery apply method alert me when everything is done.

Now we need just the php code to complete our upload:

<?php
if(isset($_FILES[‘file’])){
$imgFileName=date(“Y”).date(“m”).date(“j”).”_”.$_POST[‘index’].”_”.rand(1000,9999).”.jpg”;
if(move_uploaded_file($_FILES[‘file’][‘tmp_name’], “images/”.$imgFileName)){
echo “upload ok”; //or anything you need
}
?>

First of all I’ve to control if there’s images. Then I create a name for my image (something like: 20160330_1_1234.jpg but it’s just an idea for a new name). At last I upload the image by the move_uploaded_file method. To retrieve a post data I need just a classical $_POST[name] set in the params (JS) object of the FileUploadOptions class.

And that’s all! 🙂