ajax - Javascript uploading duplicates -

i have bit of html area user can drag , drop files upload. nested within, "browse files" button clicks() hidden file input should choose traditional upload method. works far exception if user drags , drops multiple files (more one), uploads each of them twice (3 dropped files uploads 6 files). not if user uploads via browse files button, i've narrowed down on ondrop function , included below. can post additional code if problem isn't in code block.

update: logged variable droppedfile console once before for loop , once after , noticed when logged after loop , 2 files dropped, variable contained 2 filelists , each list contained both of files (making 4 uploads). how for loop altering variable??

 dropzone.ondrop = function(e){     e.preventdefault();     this.classname = 'dropzone';     var droppedfile = e.target.files || e.datatransfer.files;     (i=0; < 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 not allowed.");        }else{            uploadbutton.innerhtml = 'uploading...';            //calls function assigns file new formdata obj , sends via ajax                                  upload(droppedfile);         }     } } 

the problem occurs because uploading both files each time loop executed. replace

upload(droppedfile); 

witn

upload(droppedfile[i]); 

alternatively can ensure files valid before uploading

var valid=true; (i=0; < 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 not allowed.");        valid=false;    } } if(valid) {    uploadbutton.innerhtml = 'uploading...';                         upload(droppedfile); }