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?
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).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With