Question

[Solved] I don’t want to see ‘no file chosen’ for a file input field

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

<input type="file" id="field-id" name="html" />
Enquirer: sachin k

||

Solution #1:

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.

Respondent: Erich Douglass

Solution #2:

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";"/>
Respondent: Will Jenkins

Solution #3:

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.

Solution #4:

<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>
Respondent: kbtz

Solution #5:

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

Respondent: alex

Solution #6:

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.

Respondent: jlebrijo

Solution #7:

Try the below code in the mouseover event

jQuery('input').attr('title', ''); 
Respondent: IshaS

Solution #8:

Try this:

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

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

Respondent: Pavel Nemec

Solution #9:

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

  1. create a button element

    • with an onclick="someFunction()" and some id="some_id"
    • an img tag with src="https://www.py4u.net/discuss/someimage" – to display an image rather than some text
  2. create a input element

    • with type="file" style"display: none" accept="image/*" capture="camera" id="hidden_input"
  3. 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
          }
      }
      
Respondent: Donald

Solution #10:

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;
}
Respondent: haz0rd

Solution #11:

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.

Respondent: sibaspage

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Most Popular

To Top
India and Pakistan’s steroid-soaked rhetoric over Kashmir will come back to haunt them both clenbuterol australia bossier man pleads guilty for leadership role in anabolic steriod distribution conspiracy