Drag and drop zone in JS - File input

Question

I have problem with uploading files in my existing form. What I am looking for is script that will make possible to add multiple files (max 5) and you can add at once from one to five files. If you add one by one, I need it to add new, not replace the previous one.

I got form looking like this:

Name
LastName
Email
Phone number
Interests
Files

and filenames are created like this: name+lastname+phonenumber+filename

And I add entry to database with path of everyfile - this is done and I need only good drag and drop zone.

I need it to show added filename and make it possible to delete added file from queue.

But I don't want files to upload when I add them. I want it to upload when I submit my whole form so filename can be created and path to DB can be added.

Could anyone please provide me good script to that, or based on my scripts from two topics I mentioned before make it avaiable to do what I want?

I was able to add 5 files one by one and I described it here: HTML Add multiple file to the input

Also I was able to add more at once what I described here: https://stackoverflow.com/questions/30499388/dropzone-js-into-another-form

Answer 1

I think that this example help you. This app allow drag and drop files to gray zone (1 or 5) If you click on the file name, it removes file from the list.

function init() {
    //get dragdrop element
    var dd = document.getElementById("dragdrop");
    //get files element
    $files = document.getElementById("files");
    dd.ondragover = stop;
    dd.ondragleave = stop;
    if ('FileReader' in window) {
        document.ondrop = dragAccept;
    }

    //get form
    var $form = document.querySelector("form");
    //catch on submit
    $form.onsubmit = function (e) {
        stop(e);
        var fd = new FormData();
        //apend files to FormData
        for (var i in files){
            var file = files[i].file;
            var filename = file.name;
            var name = "file";
            fd.append(name, file, filename);
        };
        //append inputs to FormData
        var $inputs = $form.querySelectorAll("input");
        for (var i = 0; i < $inputs.length; i++) {
            var $input = $inputs[i];
            fd.append($input.getAttribute("name"), $input.value);
        }
        //Send data
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/echo/html/', true);
        xhr.send(fd)
    }
}

function stop(e) {
    e.stopPropagation();
    e.preventDefault();
}

function dragAccept(e) {
    stop(e);
    if (e.dataTransfer.files.length > 0)
        for (var i = 0; i < e.dataTransfer.files.length; i++) {
            addFile(e.dataTransfer.files[i]);
        }
}

//file list store
var files = {};
// html element of file list
var $files = null;
//add file to file list
function addFile(file) {
    //add files with diferent name, max files count 5
    if (!(file.name in files) && Object.keys(files).length < 5) {
        var div = createFile(file.name);
        $files.appendChild(div);
        files[file.name] = {
            file: file,
            element: div
        }
    }
}

//create html element with file name
function createFile(name) {
    var div = document.createElement("div");
    div.innerText = name;
    var input = document.createElement("input")
    //remove on click
    div.addEventListener("click", function () {
        $files.removeChild(this);
        delete files[name];
    })
    return div;
}


window.addEventListener("load", init);

<form method="post" enctype="multipart/form-data" action="">
    <label>Name<input name="name" /></label>
    <label>Last name<input name="lastName" /></label>
    <label>Email<input name="email" /></label>
    <div id="dragdrop" style="width: 300px; height: 300px; background-color:lightgray">Drag drop zone</div>
    <div id="files"></div>
    <button type="submit">Send</button>
</form>