Dynamically set value of a file input

Question

Is there a way to set the value of a file input (<input type="file" />) or is that all blocked for security? I'm trying to use google gears' openFiles to make a simple multi-uploader.

Note:

The answer(s) below reflect the state of legacy browsers in 2009. Now you can actually set the value of the file input element dynamically/programatically using JavaScript in 2017.

See the answer in this question for details as well as a demo:
How to set file input value programatically (i.e.: when drag-dropping files)?

I'm pretty sure that you are right and file input fields are read only. — Ian Oxley, Jun 19 '09 at 10:03
I did a full referenced and up-to date (dec 2013) answer about this here: [Remember and Repopulate File Input](http://stackoverflow.com/a/20537822/588079) — GitaarLAB, Dec 16 '13 at 03:25
Reopen. 62+62 upvotes (not to mention +15 bookmarks) mean more than some odd opinion of someone — Green, Jul 03 '17 at 21:10

Joel · Accepted Answer · 2014-05-15T10:53:42.247

67

It is not possible to dynamically change the value of a file field, otherwise you could set it to "c:\yourfile" and steal files very easily.

However there are many solutions to a multi-upload system. I'm guessing that you're wanting to have a multi-select open dialog.

Perhaps have a look at http://www.plupload.com/ - it's a very flexible solution to multiple file uploads, and supports drop zones e.t.c.

edited May 15 '14 at 10:53

answered Jun 19 '09 at 10:04

Joel

2,185
4
29
56

1

Someone replaced the URL with one that works. – JohnK Feb 19 '15 at 19:30
I think this answer is outdated. It is no longer possible to set a default file, as it could be read through the FileReader API and sent by XHR. The fact that `input.files` is read-only is probably a matter of legacy. – Thaddee Tyl Jun 05 '16 at 12:48
Considering the question is "Is there a way to set the value of a file input"? And the answer says "It's not possible".. still perfectly valid answer no? What does it have to do with the FileReader API or XHR? – Joel Jun 06 '16 at 16:17

score 2 · Answer 2 · answered Jan 19 '16 at 08:01

I am working on an angular js app, andhavecome across a similar issue. What i did was display the image from the db, then created a button to remove or keep the current image. If the user decided to keep the current image, i changed the ng-submit attribute to another function whihc doesnt require image validation, and updated the record in the db without touching the original image path name. The remove image function also changed the ng-submit attribute value back to a function that submits the form and includes image validation and upload. Also a bit of javascript to slide the into view to upload a new image.

score 0 · Answer 3 · answered Jul 06 '16 at 16:10

I ended up doing something like this for AngularJS in case someone stumbles across this question:

const imageElem = angular.element('#awardImg');

if (imageElem[0].files[0])
    vm.award.imageElem = imageElem;
    vm.award.image = imageElem[0].files[0];

And then:

if (vm.award.imageElem)
    $('#awardImg').replaceWith(vm.award.imageElem);
    delete vm.award.imageElem;

score -1 · Answer 4 · edited Mar 18 '15 at 06:35

-1

I had similar problem, then I tried writing this from JavaScript and it works! : referenceToYourInputFile.value = "" ;

edited Mar 18 '15 at 06:35

Josh Gafni

2,831
2
19
32

answered Mar 18 '15 at 05:14

CESAR SORO

23
1

6

In what way does this "work"? The [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#File_inputs) explicitly states, "You can't set the value of a file picker from a script; doing something like [this] has no effect" – MrWhite Apr 23 '15 at 19:34
7

...apart from _clearing_ the file selection. – MrWhite Apr 24 '15 at 14:11
3

The question is about setting value of a file input, not clearing it. – Michał Perłakowski Dec 31 '15 at 09:23

Dynamically set value of a file input

4 Answers4

Linked

Related