Within my HTML code, there is a section where users can drag and drop files for upload. Inside this area, there is also a "browse for files" button that triggers a hidden file input if users prefer the traditional upload method. Everything functions correctly except for one issue: when a user drags and drops multiple files (more than one), each file gets uploaded twice (for example, 3 dropped files result in 6 uploads). Interestingly, this duplication does not occur when using the browse button for file selection. After some debugging, I have determined that the problem lies within my ondrop function, which I have provided below. If needed, I can share more code snippets to help identify the source of the issue.
Update: Upon logging the droppedfile variable before and after the for loop, I observed an unexpected behavior. When two files were dropped, the variable contained 2 fileLists, each containing both files (resulting in 4 uploads). This led me to question how my for loop was affecting the 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);
}
}
}