I am using dropzone.js and I need to return back selected files in my view in hidden inputs but I'm getting [object File] in order to solve that I've tried to update my input values by document.getElementsByName("documents["+index+"][data]").value = f after half of second yet I'm getting same error!

Here is my code

var myDropzone = new Dropzone("#dropzone-form", {
    //.....
    init : function() {
        this.on("addedfile", function(file) {
            docs.push(file); // make array of selected files
            setTimeout(async function() {
                addDocsToForm(docs); // call function to return inputs in view
            }, 2000);
        });
    }
    //....
});

async function addDocsToForm(docs) {
    // loop array files
    docs.forEach(function(myD, index) {
        var dd = myD;

        dd.previewElement.classList.add("dz-success");
        // return inputs with file data (currently getting `[object File]`)
        $('#botofform').append('<input name="documents['+index+'][data]" value="'+ dd +'">');

        // make new file from file data
        var f = new File([""], dd['name'], {type: dd['type'], lastModified: dd['lastModified']});
        setTimeout(async function() {
            // update inputs value with file data (currently getting `[object File]`)
            document.getElementsByName("documents["+index+"][data]").value = f;
        }, 500);
        dd.previewElement.classList.add("dz-complete");
        console.log('Done');
    });
}

PS: I can get my files data by converting them into base64 (not interested) but due to server limits request will become so big that server always return 413 error so I decided to append ordinary input fields and send files just like when we don't use dropzone.

Any idea?