Jquery finding the right list object?

JavaScript
1

I’m trying to create an multiple upload script and the upload part is working fine, but…

When a file is uploading a animated gif is shown in the list part <li></li>. If I only upload 1 at the time everything looks just fine and the animated gif is changed to the just uploaded image. Great!. But if I upload 2 or mare at the same time the problem is there. For each upload I start a list object is created. This part works fine, but when picture 1 is done uploading it is shown in the last created list object and the same is picture 2 overwriting picture 2. This is not good… How can I change this?

var mynewLI = null;
new aUpload(uploadBtn, {
	action: 'upload.php',
	name: 'uploadfile',
	onSubmit: function(file, ext){
		 if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){ 
			// If the ext. is not allowed 
			status.text('Only JPG, PNG or GIF files are allowed');
			return false;
		}
		mynewLI = $('<li></li>').appendTo('#loadstatus').html('<img src="waiting.gif" />').addClass('success');
	},
	onComplete: function(file, response){
		//Add the file to a list
		if(response==="success"){
			mynewLI.html('<img src="./uploads/'+file+'" alt="" /><br />').addClass('success');
		} else{
			mynewLI.text(file).addClass('error');
		}
	}
});

Thanks in advance :slight_smile:

2

You could use a data object, so that you use the name of the file to store the appropriate LI object.


$('#loadstatus').data(file, mynewLI);

That way, the appropriate LI can then be retrieved


var mynewLI = $('#loadstatus').data(file);
3

Hey Paul, Not sure where to insert this? I’m a new struggelar at this :expressionless:

4

The first one goes at the end of the the onsubmit function, and the second one goes at the start of the complete function.

5

Thanks Paul, works like a charm… You just made my day :wink: