Fill input file form with JavaScript

isiaatz picture isiaatz · Apr 2, 2013 · Viewed 9.8k times · Source

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 need to fill an HTML form with JavaScript to set the path of a file for upload it. The web that this form belongs to, already has a visual upload implemented, but

<form id="mobile_fileform">
    <input type="file" style="height: 20px; width: 0px; opacity: 0; " id="mobile_fileselect1" multiple="" size="-17">
    <input type="file" style="height: 20px; width: 0px; opacity: 0; " id="mobile_fileselect2" multiple="" size="-17">
    <input type="file" style="height: 20px; width: 0px; opacity: 0; " id="mobile_fileselect3" multiple="" size="-17">
</form>

How can I set the path of the file in this form and how can I upload it using JavaScript?

Thanks for your help

Answer

James Hill picture James Hill · Apr 2, 2013

The value property of input:file is read-only for security reasons. If you want to set it, you'll need to do it server-side.

As a result, what you're asking to do is not possible. Consider the implications: any webpage would be able to upload any file from someone's computer, so long as they knew the path.