Get filename from input file in Javascript

Question

I have noticed that bootstrap is able to parse out and display the top level filename from a file input field when the user selects a file.

<input type="file" id="exampleFile">

JSFiddle: http://jsfiddle.net/na4j7n6y/

My question: Is this functionality exposed for me to use in my own javascript code? Or do I have to parse out the filename once again using my own technique?

I have tried retrieving the filename like so:

$('#exampleFile').val()
// Resolves to 'C:\fakepath\FILENAME' instead of 'FILENAME'

I'm not sure what you are asking. Are you wanting to know what Bootstrap.js object holds the name of the file, so you can reference it? in HTML? in Javascript? in PHP? etc — Kirk Powell, Mar 17 '15 at 19:10
In javascript, I would like to be able to reference the filename of the user selected file. — hofan41, Mar 17 '15 at 19:11
I believe the DOM would have an object element that holds the value as displayed. You could use your own JS to reference that element. — Kirk Powell, Mar 17 '15 at 19:13
I don't see how I could retrieve it. Could you provide a fiddle? — hofan41, Mar 17 '15 at 19:17
My bad, looks like this feature I was speaking of was not a bootstrap feature at all, but a feature of my browser. — hofan41, Mar 17 '15 at 19:33

score 3 · Accepted Answer · edited May 23 '17 at 10:24

3

Well, bootstrap is a framework based on html, css and javascript. The javascript part of this framework uses jQuery and not a own library. Then you could try to solve it using a regex with javascript/jquery, for sample:

var fullPath = $("#exampleFile").val();    
var filename = fullPath.replace(/^.*[\\\/]/, '');

Take a look here:

edited May 23 '17 at 10:24

Community

1
1

answered Mar 17 '15 at 19:25

Felipe Oriani

37,948
19
131
194

Thanks. However, I was hoping there was a way to reuse the logic that bootstrap had to retrieve the filename. It's looking like this is currently not available. – hofan41 Mar 17 '15 at 19:27
Yes, you have to do it using some javascript. – Felipe Oriani Mar 17 '15 at 19:28

score 1 · Answer 2 · answered Mar 17 '15 at 19:37

Check this JSFiddle to reference the filepath displayed.

http://jsfiddle.net/67y9tpd4/

HTML

<div id="write"><button type="button" onclick="getAfilepath()">Print Filepath</button></div>

JS

function getAfilepath(){    
    var afilepath = document.getElementById("uploadFile").value;
    document.getElementById("write").innerHTML=afilepath;
}

Get filename from input file in Javascript

2 Answers2