By Alex S


2009-06-19 10:00:08 8 Comments

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)?

4 comments

@jstudios 2016-07-06 16:10:25

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;

@Richard - IMPI MEDIA 2016-01-19 08:01:55

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.

@CESAR SORO 2015-03-18 05:14:10

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

@MrWhite 2015-04-23 19:34:20

In what way does this "work"? The Mozilla Docs explicitly states, "You can't set the value of a file picker from a script; doing something like [this] has no effect"

@MrWhite 2015-04-24 14:11:40

...apart from clearing the file selection.

@Michał Perłakowski 2015-12-31 09:23:07

The question is about setting value of a file input, not clearing it.

@Joel 2009-06-19 10:04:48

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.

@JohnK 2015-02-19 19:30:39

Someone replaced the URL with one that works.

@Thaddee Tyl 2016-06-05 12:48:58

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.

@Joel 2016-06-06 16:17:41

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?

Related Questions

Sponsored Content

49 Answered Questions

58 Answered Questions

[SOLVED] How do I include a JavaScript file in another JavaScript file?

18 Answered Questions

[SOLVED] Disable/enable an input with jQuery?

41 Answered Questions

[SOLVED] Setting "checked" for a checkbox with jQuery?

26 Answered Questions

[SOLVED] Set a default parameter value for a JavaScript function

54 Answered Questions

27 Answered Questions

[SOLVED] Set cellpadding and cellspacing in CSS?

8 Answered Questions

[SOLVED] How to set a value to a file input in HTML?

Sponsored Content