I have made a webpage with a input form. A user can either click on the box or drag and drop a file.
I am having no issue with click and upload.
The issue here is with drag and drop upload. Whenever I drag and drop a file over the desired area, the files gets registered in the DataTransfer but it doesn't trigger the drag and drop and hence no further processing.
$form.trigger('submit')
I used this line to trigger the drag and drop but it triggers <input>
again and an empty file is returned instead of the file in DataTransfer.
Codepen Link: Codepen
Here is the complete JS code.
//The code that triggers when the file is dropped. The trigger code should be in this function below;
dropArea.addEventListener("drop", (e) => {
e.stopPropagation();
e.preventDefault();
dropArea.classList.add("drop_area--drag");
container.classList.add("container--drag");
orSpan.classList.add("or_span--drag");
dropInfo.classList.add("drop_info--drag");
btn.classList.add("pdf_btn--drag");
icon.classList.add("icon--drop");
loading.classList.remove("loading");
loading.classList.add("loading--drop");
button.classList.add("pdf_btn_container--drag");
/*reader.onload = ()=>{
};*/
file = e.dataTransfer.files;
//let $form = $('form');
//$form.trigger('submit');
console.log(file);
if (file.length > 1 || file.length === 0) {
alert("Multiple files selected!");
dropArea.classList.remove("drop_area--drag");
container.classList.remove("container--drag");
orSpan.classList.remove("or_span--drag");
dropInfo.classList.remove("drop_info--drag");
btn.classList.remove("pdf_btn--drag")
loading.classList.add("loading");
loading.classList.remove("loading--drop");
button.classList.remove("pdf_btn_container--drag");
icon.classList.remove("icon--drag");
icon.classList.remove("icon--drop");
} else {
file = file[0];
//console.log(file);
$(function(){
let $form = $("form");
//$form.trigger('submit');
ajaxData = new FormData();
console.log(1,file);
ajaxData.append($('input').attr('name'), file);
console.log(2,file);
console.log(ajaxData);
$.ajax({
url: $form.attr('action'),
type: $form.attr('method'),
data: ajaxData,
//dataType: 'json',
cache: false,
contentType: false,
processData: false,
success: function (data){
console.log("Success");
},
});
//$form.trigger('submit'); //Using this triggers the <input> box and an empty file is returned instead of the file in DataTransfer.
});
}
});
//The code below triggers <input> because input button is hidden.
document.getElementById("certificate").onchange = function () {
console.log("Le bhai main bhi chal gya!");
dropArea.classList.add("drop_area--drag");
container.classList.add("container--drag");
orSpan.classList.add("or_span--drag");
dropInfo.classList.add("drop_info--drag");
btn.classList.add("pdf_btn--drag");
icon.classList.add("icon--drop");
loading.classList.remove("loading");
loading.classList.add("loading--drop");
button.classList.add("pdf_btn_container--drag");
console.log(document.getElementById("certificate").value);
document.getElementsByTagName("form")[0].submit();
}
P.S <input>
here means click and upload.