The code below is made for creating an array of file objects with no duplicates, from a drag and drop situtation(the user drag some files here, some files there, organize the order, and finally upload the images):
var fileInput = document.getElementById("file-input");
var fileList = [];
fileInput.addEventListener("change", e => {
var fileInputArray = [...fileInput.files];
fileList = fileInputArray.concat(fileList);
fileList = Array.from(new Set(fileList.map(a => a.name))).map(name => {
return fileList.find(a => a.name === name)
});
});
var fileCatcher = document.getElementById("file-catcher");
fileCatcher.addEventListener("submit", e => {
let x = undefined;
x = Object.assign({}, [...fileList]);
fileInput.files = x;
});
And my problem is in this line of the code:
fileInput.files = x;
As many of you already know, File List is ready only.
I tried so many variations, for in, for of, tried to hardcode a File List length with some great number(20 as an example), but all failed.
But I absolutely need to "hack this", because what I want to do is taking no duplicate images, from a drag and drop file situation, with some delete buttons as well.
I need to upload the files and the text with a single submit. It is no problem to when you upload as a batch, but with this "personalization" I've found myself lost.
I was trying, in some way, to replace the content of File List before uploading, but it is read only.
If I preventDefault(); I have no clue how I'm gonna treat the data in my server. The whole server is configured to take all the info from one single POST
If I just had some way of writing a File List, the problem would be solved
Can someone help me? It is really frustrating seing all great work going to be useless.
Thanks.
