Input File field to Input Text field

Question

I don't even know if this is possible or not but is there a method you can take the value of the selected file in a input file field to a input text field?

Like this:

Answer 1

Hook on the change event of the file field.

<form method="post" enctype="multipart/form-data">
    <input type="file" onchange="this.form.filename.value = this.value">
    <input type="text" name="filename">
</form>

Jsfiddle demo. Note that IE6/7 incorrectly gives the full path while other browsers correctly gives only the filename.

Answer 2

This should be possible by creating a new text input element and populating it with the .value property of the file input.

Note, however, that all modern browsers store only the file name in the value property for security reasons. You will not be able to get the full path of the selected file.

Sources: MSDN on IE8

Answer 3

You can't do it without first storing the file on your own server.

The file input control does not contain the file's data. Your browser provides it to you as a placeholder until you submit the file data via a POST form submission.

If you're after the file's path, you also cannot do that (in modern browsers, as Pekka says). The browser does not give that information to client-side scripts. It may provide the filename, however.