How to get file name when user select a file via <input type=“file” />?

Question

I've seen similar questions before,which ends up with no solution,because of security reasons.

But today I see hostmonster has successfully implemented this,when I open a ticket and attach a file in their backend.

It works both with firefox and IE(version 8 to be exact).

I've verified it's exactly client side scripting,no request is sent(with firebug).

Now,can we re-consider this question?

What do you mean by "get a file name"? Isn't the file name obvious, because the user just selected it? — Feb 3 '10 at 4:11

score 27 · Accepted Answer · 2010-02-03 04:33:02Z

You can get the file name, but you cannot get the full client file-system path.

Try to access to the value attribute of your file input on the change event.

Most browsers will give you only the file name, but there are exceptions like IE8 which will give you afake path like: "C:\fakepath\myfile.ext" and older versions (IE <= 6) which actually will give you the full client file-system path (due its lack of security).

document.getElementById('fileInput').onchange = function () {  alert('Selected file: ' + this.value);};

I'm getting C:\fakepath\... in chrome, but it's fine for my purposes. Thanks. — Mar 3 '14 at 1:05
This is about security reason. Web sites must not learn user's folder path. — Jan 24 at 10:33

score 4 · Answer 2

just tested doing this and it seems to work in firefox & IE

<html>    <head>        <script type="text/javascript">            function alertFilename()            {                var thefile = document.getElementById('thefile');                alert(thefile.value);            }        </script>    </head>    <body>        <form>            <input type="file" id="thefile" onchange="alertFilename()" />            <input type="button" onclick="alertFilename()" value="alert" />        </form>    </body></html>

score 27 · Accepted Answer · 2010-02-03 04:33:02Z

You can get the file name, but you cannot get the full client file-system path.

Try to access to the value attribute of your file input on the change event.

Most browsers will give you only the file name, but there are exceptions like IE8 which will give you afake path like: "C:\fakepath\myfile.ext" and older versions (IE <= 6) which actually will give you the full client file-system path (due its lack of security).

document.getElementById('fileInput').onchange = function () {  alert('Selected file: ' + this.value);};

I'm getting C:\fakepath\... in chrome, but it's fine for my purposes. Thanks. — Mar 3 '14 at 1:05
This is about security reason. Web sites must not learn user's folder path. — Jan 24 at 10:33

score 4 · Answer 4

just tested doing this and it seems to work in firefox & IE

<html>    <head>        <script type="text/javascript">            function alertFilename()            {                var thefile = document.getElementById('thefile');                alert(thefile.value);            }        </script>    </head>    <body>        <form>            <input type="file" id="thefile" onchange="alertFilename()" />            <input type="button" onclick="alertFilename()" value="alert" />        </form>    </body></html>

How to get file name when user select a file via <input type=“file” />?

2 Answers

2 Answers