I'm currently facing an issue with a function that involves pre-resizing and ajax file uploading. I have a FOR loop which calls this function, depending on the length of the file input size. The strange thing is, sometimes when I call it multiple times, the function ends up uploading duplicate images. My theory is that the current function call starts before the previous one has finished, potentially causing it to use the same canvas. Can anyone suggest a fix for this problem? Any help would be greatly appreciated!
Below is the relevant code snippet:
...
for (var i = 0; i < filesToUpload.length; i++) {
j=j+1;
preandupload(filesToUpload[i],filesToUpload.length,j);
}
...
function preandupload(file,cuantos,actual){
var dataurl = null;
var img=null;
var canvas=null;
var ctx=null;
// Create an image
img = new Image();
// Create a file reader
var reader = new FileReader();
// Set the image once loaded into file reader
reader.onloadend = function(e)
{
img.src = e.target.result;
img.onload = function () {
var canvas = document.createElement("canvas");
canvas.id = "mycanvas"+actual;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var MAX_WIDTH = 1280;
var MAX_HEIGHT = 1280;
var width = img.width;
var height = img.height;
if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
}
canvas.width = width;
canvas.height = height;
var fd = new FormData();
getOrientation(file, function(orientation) {
ctx.drawImage(img, 0, 0, width, height);
dataurl = canvas.toDataURL("image/jpeg",0.6);
// Post the data
fd.append("ori", orientation);
fd.append("image", dataurl);
$.ajax({
url: 'savetofile.php',
data: fd,
cache: false,
contentType: false,
processData: false,
enctype: 'multipart/form-data',
type: 'POST',
success: function(data){
uploadComplete2(cuantos,actual)
}
});
});
} // img.onload
}
// Load files into file reader
reader.readAsDataURL(file);
}