如何触发拖放文件上传？

Question

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();
}

PS <input> here means click and upload.

Answer 1

$form.trigger('submit') can be used to trigger the form. In my case it is now triggering twice sending my file and an empty octet-stream.