CODEWITHSUNDEEP
javascripthtml
Peter
Peter

Reputation: 2306

How to remove "no file selected" from type=file inputs?

I can't seem to figure out any way to remove the "No file selected" text that shows up next to inputs of type "file".

Do you guys know any way how to remove this text?

enter image description here

Upvotes: 32

Views: 55305

Answers (9)

Heemanshu Bhalla
Heemanshu Bhalla

Reputation: 3763

I think you cannot. you can using css to hide that label "No File Choosen" by decreasing width of input file control. I have used below code to do it for myself

Css Code

input[type=file] {
    width: 93%;
}

Upvotes: 0

Madhuka Dilhan
Madhuka Dilhan

Reputation: 1416

You can try this. Its work for me firefox browser

<style type="">
    input[type='file'] {
       color: transparent;
    }
</style>

Upvotes: -2

Seth M.
Seth M.

Reputation: 11

Well, since there is no way to completely disable the text, I'd suggest either placing an element over the text or try the following solution..

CSS

input[type="file"] {
width: 90px; /* Keep it under 100px in order to hide the unwanted text. */
}

and add an html inline-title attribute to the element to hide the "No File Chosen" hover text.

HTML

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

or, you could do it all with JavaScript.

JS

document.addEventListener('DOMContentLoad', myFunction);

function myFunction() {
const FilePicker = document.getElementById('FileId');
FilePicker.style.width = "90px";
FilePicker.title = ""; // Leave This Empty
}

Upvotes: 1

BrightIntelDusk
BrightIntelDusk

Reputation: 4685

You can replace the file field with a button with the answer to this question: file upload button without input field?

Upvotes: 2

Carlos Pliego
Carlos Pliego

Reputation: 869

This is a really good hack and its a lot cleaner.

HTML

<div id="file_info' style='display:inline;'>Browse</div>
<input type="file" name='file[]' multiple style='opacity: 0;' onchange='displayFileName()'/>

JS

function displayFileName() {
    var files = $('input[type="file"]')[0].files;
    document.getElementById('file_info').innerHTML = files.length + " images to upload";`
}

Upvotes: 1

Ajey
Ajey

Reputation: 8202

input[type='file'] {
  color: transparent;
}

Enjoy

Upvotes: 47

Luan Dang
Luan Dang

Reputation: 629

CSS
<style>
#image_file{
   position: relative;
   width: 188px;
   border: 1px solid #BBB;
   margin: 1px;
   cursor: pointer;
   float: left;
  }
</style>

HTML
<input id="image_file" onclick="getFile()" onfocus="this.blur()" value=""/>
<div style='height: 0px;width: 0px; overflow:hidden;'>
    <input type="file" id="PinSpot_file">
</div>
<input type="button" onclick="getFile()" style="background-color: #DDD;" value="Browser" >


JAVASCRIPT
function getFile(){
   document.getElementById("PinSpot_file").click();
 }

// Event when change fields
$('#PinSpot_file').live('change', function(e) {     
  var file = this.value;
  var fileName = file.split("\\");
  document.getElementById("image_file").value = fileName[fileName.length-1];

   //AJAX
}

Upvotes: 1

LuAmbros
LuAmbros

Reputation: 181

You can do this by defining a width to the input and hiding the exceeding content (the undesired "No file selected" text).

input {
    width: 132px;
    overflow:hidden;
}

Here is the demonstration on jsfiddle.

Beware: each language has its own default text and it may render different input sizes. In brazilian portuguese that 132px width is fine!

My answer was based on this similar question on stackoverflow.

Upvotes: 9

Thom Smith
Thom Smith

Reputation: 14086

There is no cross-browser way to do this. The "no file selected" text is in the implementation-defined part of the widget, and I don't believe that most browsers offer much in the way of browser-specific customization. On the other hand, you could simply use CSS to cover the text with something when the value attribute is empty.

Upvotes: 14

Related Questions