I don't want to see 'no file chosen' for a file input field

Question

Is there any way where i can stop "no file chosen" for input type file.

<input type="file" id="field-id" name="html" />

See: [How can I remove the “No file chosen” tooltip from a file input in Chrome?][1] [1]: http://stackoverflow.com/a/14200185/1955615 — jameswakefield, Jan 07 '13 at 16:46
See my answer to: [How can I remove the “No file chosen” tooltip from a file input in Chrome?][1] [1]: http://stackoverflow.com/a/14200185/1955615 — jameswakefield, Jan 07 '13 at 16:47
Possible duplicate of [How can I remove the "No file chosen" tooltip from a file input in Chrome?](http://stackoverflow.com/questions/12035400/how-can-i-remove-the-no-file-chosen-tooltip-from-a-file-input-in-chrome) — kenorb, May 23 '16 at 16:34

score 16 · Answer 1 · answered Sep 02 '14 at 20:01

Simplest (and reliable as far as I know) hack I've found is to set the initial font color to transparent to hide the "no file chosen" text, and then change the font color to something visible on change.

Voilá:

<input type="file" style="color:transparent;" onchange="this.style.color = 'black';"/>

score 16 · Answer 2 · answered Mar 20 '12 at 22:19

16

You can't get rid of the 'no file chosen' entirely, but you can change the text to something that makes sense by setting the title.

<input type="file" title="foo">

will display "foo" on mouseover instead of "no file chosen"

unfortunately,

<input type="file" title="">

doesn't work like you might hope.

answered Mar 20 '12 at 22:19

Erich Douglass

51,744
11
75
60

3

empty space will do the trick ;) – Monicka Nov 13 '15 at 15:11
@Monicka If space is assigned to title attribute, on hover, it will show box with that space. It confuses user as if something is missing. – Rajesh Surana May 17 '17 at 00:47

score 8 · Answer 3 · answered May 08 '11 at 12:05

8

For Chrome browsers you can use such trick:

<input type="file" id="myFile" name="html" style="width: 90px;" onchange="this.style.width = '100%';" />

Meaning setting fixed width that will show only the button then after change change it back to 100% so the file name is displayed.

answered May 08 '11 at 12:05

Shadow The GPT Wizard

66,030
26
140
208

1

What about displaying the button in other languages? 90px will not always be correct. – jose Jan 31 '12 at 17:11
@jose as far as I could see, browsers won't expose the width of the button, just the total width of the whole input control - my way will work for website used by audience having the same language for better flexibility, custom control (as mentioned by alex) is the way to go. – Shadow The GPT Wizard Jan 31 '12 at 20:52

score 4 · Answer 4 · answered May 08 '11 at 12:05

<style type="text/css">
#inputcontainer {
    background:url("http://phpfileuploader.com/images/upload.png") no-repeat;
    height:50px;
    width:250px;
}

input[type="file"]{
    opacity:0;
    height:48px;
    width:48px;
}
</style>
<div id="inputcontainer">
    <input type="file" onchange="document.getElementById('file-path').value = this.value.split('\\')[this.value.split('\\').length-1];"/>
    <input type="text" id="file-path"/>
</div>

score 3 · Answer 5 · answered Dec 21 '12 at 18:05

3

Seems ridiculous for the easiness but for me was enough:

input[type='file'] {
  width: 95px;
 }

Tested on Chrome 20, Safari 5.1.7 and IE 9.

Note: in IE9 is a little weird because left a mini input_text area.

answered Dec 21 '12 at 18:05

jlebrijo

521
5
7

score 3 · Answer 6 · edited Jun 17 '14 at 10:41

3

Try the below code in the mouseover event

jQuery('input').attr('title', '');

edited Jun 17 '14 at 10:41

Sulthan Allaudeen

11,330
12
48
63

answered Aug 30 '13 at 10:16

IshaS

837
1
10
31

score 3 · Answer 7 · answered May 08 '11 at 11:45

3

Nope, you'd need to create a custom control.

answered May 08 '11 at 11:45

alex

479,566
201
878
984

score 2 · Answer 8 · edited Sep 24 '14 at 03:29

Even though this is an old post, I think that this answer will be helpful to someone that wishes to do something similar. I wanted a button to insert an image from a mobile device's camera but I didn't want the ugly button "[Choose file] No file selected... " rubbish.

I wanted a button:

that I could customize e.g. have a image button
a user would click it and it would ask them for some file input
use input and post to a server

What I did

create a button element
- with an onclick="someFunction()" and some id="some_id"
- an img tag with src="someimage" - to display an image rather than some text
create a input element
- with type="file" style"display: none" accept="image/*" capture="camera" id="hidden_input"

JavaScript

When I click the button, it will fire the clickHiddenInput() function that will execute the click event of the element you choose

function clickHiddenInput() {
    document.getElementById("hidden_input").click();
}

document.getElementById("hidden_input").addEventListener('change', readFile, false);

function readFile(evt) {

    if (!(evt.target.files.length < 1)) {

        var data = new FormData();

        var files = evt.target.files;
        var file = files[0];

        data.append("hidden_input", file);

        // do some stuff with the file
    }
}

score 2 · Answer 9 · answered Nov 07 '14 at 15:21

2

Try this:

<input type="file" title=" "/>

Be careful about the white space - it is important because title="" does not work.

answered Nov 07 '14 at 15:21

Pavel Nemec

151
1
6

Changing title does nothing with the text at least in my case – Fanky Jul 30 '21 at 10:00

score 1 · Answer 10 · answered Jul 16 '13 at 21:45

I tried using the width settings, but it doesn't work in firefox. if you have a solid consistent background, you can just set the color to be the same as the background. I have a white background so I just:

input.remove-no-file-chosen
{
   width: 90px;
   color: #fff;
}

score 0 · Answer 11 · answered Oct 10 '17 at 07:55

0

input[type=file]{
       opacity:0;
}

Then you can design your box whatever style you want. If you click the div it will open the file explorer window.

answered Oct 10 '17 at 07:55

Sibaram Sahu

990
2
13
21

score 0 · Answer 12 · answered Nov 17 '21 at 04:52

2021_11_17 in Chrome version 96.x will working. You only need CSS.

<input type="file" style="width:70px">

It's will hidden Text and cut width. You can mix more better with example:

<input type="file" style="width:70px;color:transparent">

It's will hidden Text, cut Width, Transparent text in other Browser.

I don't want to see 'no file chosen' for a file input field

12 Answers12

Linked