Create a FileList and copy it to a File input

Question

I'm trying to create a drag and drop area that will get dataTransfer items by webkitGetAsEntry and check if the entry is a directory or file.

I then would like to be able to make the files into a FileList and copy that to a file input (that will be validated and proccesed before posted).

JSFiddle

 function handleDrop(event) { event.preventDefault(); event.dataTransfer.dropEffect = 'copy'; var length = event.dataTransfer.items.length; var elFileInput = document.getElementById('File'); for (var i = 0; i < length; i++) { var entry = event.dataTransfer.items[i].webkitGetAsEntry(); if (entry.isFile) { convertFilesToFileObjects(entry); } else if (entry.isDirectory) { var dirReader = entry.createReader(); dirReader.readEntries(function(entries) { for (var j = 0; j < entries.length; j++) { convertFileEntrysToFileObjects(entries[j]); } }); } } function convertFileEntrysToFileObjects(fileEntry) { var addFileToInput = function (file) { console.log(file); //elFileInput.files = event.dataTransfer.files; //Need to make a FileList and populate it with Files. }; if (fileEntry.isFile) { fileEntry.file(function (addFileToInput, file) { addFileToInput(file); }.bind(this, addFileToInput)); } } }

I cannot copy a file to the FileList in the HTMLInputElement it's readonly W3 FileList Interface

I'm stuck at trying to make a FileList object by using prototypes and extending objects, I haven't quite wrapped my head around JS inheritance and prototypes yet.

I's it even possible to make a FileList object and populate it with files, then copy it to the InputElement?

Edited: Wrong JSFiddle link.

Relevant: stackoverflow.com/questions/8006715/… It seems possible these days, but only with a real FileList and you can't seem to make those... — Rudie
– Rudie, Commented Oct 1, 2016 at 13:41

Formiga · Accepted Answer · 2013-09-03 06:15:46Z

Why do you need to copy a file to FileList?

Use FileReader instead. But validate a file before send is not a good idea. For security, you should do this in server side. You can validate the file before, but you SHOULD validate the file again when received.

https://developer.mozilla.org/en-US/docs/Web/API/FileReader?redirectlocale=en-US&redirectslug=DOM%2FFileReader

I'm doing both client and server-side validation on the HtmlInputElement using Annotations in MVC3. The form get posted as HttpPostedFileBase Class and handled in the Controller. I'm thinking of using a FileRead instead and post the files using XMLHttpRequest, but if I could get this to work I'd be happy.

Collectives™ on Stack Overflow

Create a FileList and copy it to a File input

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related