Cordova multiple image upload with File Transfer

Question

I'm on a cordova and jquery mobile project.

I've been able to upload one image with file transfer plugin. Now i try to upload 2 or 3 images following.

here is the html code:

<label for="image">Pictures:</label>
<a href="" id="image1Button" class="ui-btn" onclick="getPhoto(pictureSource.PHOTOLIBRARY);">Get first picture</a><br>
<a href="" id="image2Button" class="ui-btn" onclick="getPhoto(pictureSource.PHOTOLIBRARY);" style="display:none;">Get second picture</a><br>
<a href="" id="image3Button" class="ui-btn" onclick="getPhoto(pictureSource.PHOTOLIBRARY);" style="display:none;">Get third picture</a><br>
<img id="image1" style="display:none;width:25%;">
<img id="image2" style="display:none;width:25%;">
<img id="image3" style="display:none;width:25%;">
<label for="title">Title</label>
<input data-clear-btn="true" name="title" id="title" value="" type="text">
<input value="Continue" type="submit" id="adButton">

here is jquery code:

multi_upload(user_id);

function multi_upload(user_id) {

    var image1 = "image1";
    var image2 = "image2";
    var image3 = "image3";
    if($('#image2').prop('src') == ''){
        // upload one file
        upload(user_id, image1, "true");
    }
    if($('#image3').prop('src') == ''){
        // upload two files
        upload(user_id, image1, "false");
        upload(user_id, image2, "true");
    }
    if($('#image3').prop('src') != ''){
        // upload three files
        upload(user_id, image1, "false");
        upload(user_id, image2, "false");
        upload(user_id, image3, "true");
    }
}

function upload(user_id, imagesrc, final) {
    var img = '';
    var imageURI = '';
    img = document.getElementById(imagesrc);
    imageURI = img.src;
    console.log("[imageURI] "+imageURI);
    var options = new FileUploadOptions();
    options.fileKey = "file";
    options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1);
    options.mimeType = "image/jpeg";
    var params = {};
    params.timestamp = Math.round(+new Date()/1000);
    params.public_token = localStorage.getItem("token_public");
    params.hash = SHA1(params.timestamp+localStorage.getItem("token_private"));
    params.user_id = user_id;
    options.params = params;
    options.chunkedMode = false;
    var ft = new FileTransfer();
    if(final == "true"){
        ft.upload(imageURI, "http://www.example.com/api/index.php/privates/upload", finalwin, fail, options);
    }else{
        ft.upload(imageURI, "http://www.example.com/api/index.php/privates/upload", win, fail, options);
    }
}

If i upload two files for example, the code will upload two times the last selected picture. the console give me the imageURI who looks like this:

file:///storage/sdcard0/Android/data/fr.myproject.propro/cache/modified.jpg?1418726649440:500

I suppose that is a temporary file, so i presume when i select the last file, it delete the previous one... how can i find the real path of this images?

Answer 1

We recently sat with the same problem, and found that the cache file (project/cache/modified.jpg) was overriden (as you note) by a new selection, although FileTransfer.upload seems to treat it as two different files (presumably due to the ?-parameter) and thus uploads it twice.

As a workaround, we ended up renaming the files to include a timestamp before the name, such that modified.jpg?1418726649440 becomes 1418726649440modified.jpg, prior to uploading them:

function renameFile(src, callback) {
    var d = new Date();
    //find the FileEntry for the file on the device
    window.resolveLocalFileSystemURL(src, function(fileEntry) {
        //get the parent directory (callback gives a DirectoryEntry)
        fileEntry.getParent(function(parent) {
            //rename the file, prepending a timestamp.
            fileEntry.moveTo(parent, d.getTime() + fileEntry.name, function(s) {
                //Callback with the new URL of the file.
                callback(s.nativeURL);
            }, function(error) {
                alert('Error on moving file!');
                callback(src); //Fallback, use the src given
            });
        }, function(error) {
            alert('Error on getting parent!');
            callback(src); //Fallback
        });
    }, function(error) {
        alert('Error on resolveLocalFileSystemURI!');
        callback(src); //Fallback
    });
}

With src being the imageURI (i.e. path of the file), and callback being the function that uploads the file. (I should note that we're not entirely sure if we need the getParent call, as one could presumably get the DirectoryEntry by parsing src, but better safe than sorry)

NOTE: This requires the File plugin, and, depending both on your version of Cordova and File, may need to be edited somewhat (as the API has changed a little between versions).