Javascript uploading duplicates

Question

I have a bit of html with an area where a user can drag and drop files to upload. Nested within, is a "browse for files" button that clicks() a hidden file input should they choose the traditional upload method. Everything works well thus far with the exception that if a user drags and drops multiple files (more than one), it uploads each of them twice (3 dropped files uploads 6 files). It does not do this if the user uploads via the browse for files button, so I've narrowed it down to my on ondrop function and included that below. I can post additional code if the problem isn't in this code block.

Update: I logged my variable droppedfile to the console once before the for loop and once after and noticed that when logged after the for loop and 2 files were dropped, the variable contained 2 fileLists and each list contained both of the files (making 4 uploads). How is my for loop altering my variable??

 dropzone.ondrop = function(e){
    e.preventDefault();
    this.className = 'dropzone';
    var droppedfile = e.target.files || e.dataTransfer.files;
    for (i=0; i < droppedfile.length; i++) {
       if(droppedfile[i].type != "text/plain" && droppedfile[i].type != "application/pdf" && droppedfile[i].type != "application/msword"){
           alert(droppedfile[i].type + " file types are not allowed.");
       }else{
           uploadButton.innerHTML = 'Uploading...';
           //calls a function that assigns the file to a new formdata obj and sends via ajax                      
           upload(droppedfile);

       }
    }
}

Kalyan · Accepted Answer · 2015-10-27 18:56:18Z

1

The problem occurs because you are uploading both the files each time the for loop is executed. Replace

upload(droppedfile);

witn

upload(droppedfile[i]);

Alternatively You can ensure all files are valid before uploading

var valid=true;
for (i=0; i < droppedfile.length; i++) {
   if(droppedfile[i].type != "text/plain" && droppedfile[i].type != "application/pdf" && droppedfile[i].type != "application/msword"){
       alert(droppedfile[i].type + " file types are not allowed.");
       valid=false;
   }
}
if(valid) {
   uploadButton.innerHTML = 'Uploading...';                     
   upload(droppedfile);
}

edited Oct 27, 2015 at 18:56

answered Oct 27, 2015 at 18:50

Kalyan

1529 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

exeleon Over a year ago

I just came back to post that I figured this out. I actually moved the function call to upload outside of the for loop. Do you think it would be cleaner if I used try/catch to handle errors where a user drops an unaccepted file type?

Kalyan Over a year ago

The use of try catch doesn't seem necessary here as you have a simple distinction between a valid and an invalid file. One thing you can do, however, is remove the invalid file from the queue, and enquire whether you can upload the remaining files and go ahead with it. Use try catch if you have some more checks before allowing file upload, such as corrupt files, or files beyond a particular size.

Collectives™ on Stack Overflow

Javascript uploading duplicates

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related