HTML Input type file doesn't display file name in chrome

Question

I am using a jqueryui dialog to display a modal window which has a form with input tag of type file.

In chrome, when a file is selected, the file name is not displayed. When I hover over the browse button the name of the file is displayed but otherwise nothing. It works fine with firefox. Following is the screenshot of the issue.

Chrome error

I wanna know what should I do to display the name by the side of the choose button.

Presumably it's obvious to you, but what's your question? You never actually ask one. What do you actually want? — enhzflep
– enhzflep, Commented Oct 29, 2012 at 17:54
Can you specify which version of Chrome and jQuery UI you are using? This appears to work fine as it stands now. — Selosindis
– Selosindis, Commented Nov 5, 2012 at 17:02
@Selosindis latest version in both. As u said, a stand alone works fine but with my app it fails. Actually this window is called from a flex component and it exists over the flex ui. — Rahul
– Rahul, Commented Nov 5, 2012 at 17:32

mikeswright49 · Accepted Answer · 2012-10-25 13:16:06Z

4

I had this issue as well. To deal with it I added a field next to the browse button and then added the text on change like this:

   $("#fileUpload").change(function (e) {
        var path = this.value;
        this.form.field.value = "..." + path.substring(11, path.length);
   });

the substring was added as it was adding \fakepath\ to the start of the path name.

answered Oct 25, 2012 at 13:16

mikeswright49

3,41622 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Eugen Over a year ago

Any idea what causes this issue?

mikeswright49 Over a year ago

This was decided to be the default behavior for webkit browsers like chrome and safari. They don't have textbox like field but instead just show the text. So fixes like this must be made.

dkenkatewal · Accepted Answer · 2012-10-31 10:56:06Z

0

This works well.

 <input type="file" class="button" id="fileupload" value="Upload file"  multiple onChange="handleFiles(this.files)">

answered Oct 31, 2012 at 10:56

dkenkatewal

864 bronze badges

Collectives™ on Stack Overflow

HTML Input type file doesn't display file name in chrome

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related