Using JQuery to grab a file name

Question

I am using a custom file upload button in my web app. I want the user to see that they have chosen a file so I change the html of a div to show the file name.

Here is my jquery:

$("input[type=file]").change(function() {
    var filename = $("input[type=file]").val();
    $("#share-file-name p").html(filename);
});

Now, this works great, except for the fact that the value of the input is:

C:\fakepath\photo.jpg

So that's what the user sees. I just want them to see the "photo.jpg" part. How can I use my jquery to strip everything except for the file name?

Thanks!

Most of the answers below assume that all of your users are on Windows. The best answer is that which includes the regex '/[\/\\\]/' which will work for all cases. — Rob Raisch, Jul 09 '13 at 21:34

score 2 · Answer 1 · answered Jul 09 '13 at 21:26

2

This should work:

filename = filename.replace(/^.*[\/\\]/, "");

answered Jul 09 '13 at 21:26

Vivin Paliath

94,126
40
223
295

SamHuckaby · Answer 2 · 2013-07-10T02:07:31.793

1

You can just chop off anything to the left of the rightmost "/"

like so:

$("input[type=file]").change(function() {
    var filename = $("input[type=file]").val();
    // As pointed out in the comments, this line is required to make it
    // Windows compliant. It's important to handle paths from any OS.
    filename = filename.replace(/^.*[\\\/]/, '');
    $("#share-file-name p").html(filename);
});

edited Jul 10 '13 at 02:07

answered Jul 09 '13 at 21:25

SamHuckaby

1,162
1
13
35

doesn't work on windows, but hey it's only 90% of the market... – dandavis Jul 09 '13 at 21:50
@dandavis which browser did you test it in that it didn't work? This is standard JavaScript, and it should work on all major browsers. – SamHuckaby Jul 09 '13 at 22:38
it's not the JS, it's the backwards path symbol that breaks... – dandavis Jul 09 '13 at 22:44
Ah, you're quite right. I went ahead and fixed it, so it should work anywhere now. – SamHuckaby Jul 10 '13 at 02:08

score 1 · Answer 3 · answered Jul 09 '13 at 21:26

1

If you have the full file path stored in a variable filename, you can do the following to get only the file name:

filename.substring(filename.lastIndexOf("\"))

Regular expressions or the split command are overkill for what you're trying to do.

answered Jul 09 '13 at 21:26

Alex Kalicki

1,533
9
20

score 0 · Answer 4 · answered Jul 09 '13 at 21:25

0

use split("/"); and then you got an array with all elements separated by / so the last element will be the file name

var file = filepath.split("/"); file[file.length - 1]

answered Jul 09 '13 at 21:25

Sebastian Uriel Murawczik

173
1
1
10

score 0 · Answer 5 · edited Jul 09 '13 at 21:42

0

You can use this regular expression:

 filnameToDisplay = /([^\\]+.\w+$)/.exec(filename)[0];

This will get what you want regardless of length of the filepath or characters in the filename, unless they are using a strange extension I don't know about!

edited Jul 09 '13 at 21:42

jahroy

22,322
9
59
108

answered Jul 09 '13 at 21:33

Legion

796
7
12

Using JQuery to grab a file name

5 Answers5