Change the "No file chosen":

Question

I have a button "Choose file" as follows (I am using Jade but it should be the same as Html5):

 input(type='file', name='videoFile')

In the browser this shows a button with a text next to it "No file chosen". I would like to change the "No file chosen" text to something else, like "No video chosen" or "Choose a video please". I followed the first suggestions here:

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

But doing this did not change the text:

 input(type='file', name='videoFile', title = "Choose a video please")

Can anybody help me figure out where the problem is?

find answer here http://stackoverflow.com/questions/12035400/how-can-i-remove-the-no-file-chosen-tooltip-from-a-file-input-in-chrome — Mahmoud Farahat, Apr 14 '13 at 16:53
@MahmoudFarahat I do not want to remove it, I want to change the text — FranXh, Apr 14 '13 at 16:55
Can't you remove the text, and put a placeholder label next to it? — Roger Lipscombe, Apr 15 '13 at 08:23
There is a really tidy answer to this in another post. http://stackoverflow.com/a/21842275/3653494 — P-Bagels, Sep 01 '16 at 15:18
it is very possible: check out this quick solution -- includes other stuff, just scroll to bottom of CSS: https://www.w3schools.com/code/tryit.asp?filename=FWBJX00JSQD7 — darga33, Oct 17 '18 at 13:42

score 291 · Answer 1 · answered Jul 30 '13 at 14:06

291

Hide the input with css, add a label and assign it to input button. label will be clickable and when clicked, it will fire up the file dialog.

<input type="file" id="files" class="hidden"/>
<label for="files">Select file</label>

Then style the label as a button if you want.

answered Jul 30 '13 at 14:06

SKManX

3,389
2
16
12

1

This even works in IE9, where you can't hide the `file input` and click it from JavaScript. Thanks! – huysentruitw Sep 26 '13 at 18:53
1

Great solution, it even allows for an easy way to customize the field – SAFAD May 30 '14 at 10:20
13

Interesting html solution, but bad for usability. The user will always see "Select file" or equivalent, even after selecting a file. – Cthulhu Oct 10 '14 at 17:30
You can hide the 'Select file' label after image.onLoad if you do not want user to upload more images. – SKManX Oct 21 '14 at 09:07
1

There's a nice recent [article with demo that uses this technique](http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/). +1 – Roflo Sep 25 '15 at 17:02
How do I show "selected file name" after selecting? – kittu Oct 03 '16 at 08:24
The only feature I see this omitting is the ability to drag and release a file into the input – Jad S Jan 18 '17 at 21:00
So much better than other solutions online. – Wylliam Judd Apr 20 '17 at 23:03
Simple, but work perfectly. Even it can be improved with this pen https://codepen.io/nopr/pen/rpsnd – Gendrith Sep 15 '17 at 02:50
another quick solution: just scroll to bottom of CSS: (pure css - no js or anything based on is person's answer) https://www.w3schools.com/code/tryit.asp?filename=FWBJX00JSQD7 – darga33 Oct 17 '18 at 13:43
This answer breaks the drag and drop functionality of a normal file input, how can this functionality be added back? – Ferrybig Apr 03 '19 at 06:20
You may place a div around, or a div contains the label. You may style that div or label however you like and place other elements inside, like 'drag and drop here' title or even an image. That element can handle drag and drop events. Just make sure it has 'draggable' attribute. By adding listeners to that div or label, you finally get what dropped in the event data sent by ondrop event and pass it to functions which handle file input. – SKManX Apr 08 '19 at 18:54
in HTML: in JavaScript: object.ondrop = function(){myScript}; or object.addEventListener("drop", myScript); – SKManX Apr 08 '19 at 18:54
Changed nothing – Debbie Kurth Oct 23 '19 at 22:04
How do you make it tabbable i.e. accessible? – Dil Jan 12 '23 at 23:59

Odin · Answer 2 · 2016-12-19T08:52:33.237

39

Try this its just a trick

<input type="file" name="uploadfile" id="img" style="display:none;"/>
<label for="img">Click me to upload image</label>

How it works

It's very simple. the Label element uses the "for" tag to reference to a form's element by id. In this case, we used "img" as the reference key between them. Once it is done, whenever you click on the label, it automatically trigger the form's element click event which is the file element click event in our case. We then make the file element invisible by using display:none and not visibility:hidden so that it doesn't create empty space.

Enjoy coding

edited Dec 19 '16 at 08:52

answered Aug 20 '16 at 07:31

Odin

921
8
12

It seems that dragging files doesn't work when you do this. – fonZ Jun 22 '20 at 13:31
This is not accessible solution; elements with display:none are not presented to user through assistive technologies. – Lovor Apr 22 '22 at 20:48

score 25 · Answer 3 · answered Jun 20 '13 at 14:38

http://jsfiddle.net/ZDgRG/

See above link. I use css to hide the default text and use a label to show what I want:

<div><input type='file' title="Choose a video please" id="aa" onchange="pressed()"><label id="fileLabel">Choose file</label></div>

input[type=file]{
    width:90px;
    color:transparent;
}

window.pressed = function(){
    var a = document.getElementById('aa');
    if(a.value == "")
    {
        fileLabel.innerHTML = "Choose file";
    }
    else
    {
        var theSplit = a.value.split('\\');
        fileLabel.innerHTML = theSplit[theSplit.length-1];
    }
};

The best solution because it uses native Javascript that then still displays the file name, which is valuable. Most of the other solutions in the post doesn't do that. — Eugene van der Merwe, Jan 25 '22 at 05:20

score 24 · Accepted Answer · answered Apr 14 '13 at 16:59

24

I'm pretty sure you cannot change the default labels on buttons, they are hard-coded in browsers (each browser rendering the buttons captions its own way). Check out this button styling article

answered Apr 14 '13 at 16:59

Jeremy Thille

26,047
12
43
63

7

It's not the label on the button, is the "No file chosen" next to it. When I choose a file, it changes from No file chosen to fileName.something. So I believe it should be changeable. – FranXh Apr 14 '13 at 17:47
@FranXh Not possible unless you change the css class property. – Shaze Jul 23 '21 at 20:36

score 15 · Answer 5 · edited Feb 23 '17 at 08:14

Right, there is no way to remove this 'no file choosen', even if you have a list of pre-upload files.

Simplest solution I've found (and works on IE, FF, CR) is the following

Hide your input and add a 'files' button
then call the 'files' button and ask him to bind fileupload (I'm using JQuery in this example)

$('.addfiles').on('click', function() { $('#fileupload').click();return false;});

<button class="addfiles">Add Files</button>
<input id="fileupload" type="file" name="files[]" multiple style='display: none;'>

It's done, works perfectly :)

Fred

score 10 · Answer 6 · answered Apr 30 '15 at 13:04

10

$(function () {
     $('input[type="file"]').change(function () {
          if ($(this).val() != "") {
                 $(this).css('color', '#333');
          }else{
                 $(this).css('color', 'transparent');
          }
     });
})

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" name="app_cvupload" class="fullwidth input rqd">

answered Apr 30 '15 at 13:04

Ifeanyi Chukwu

3,187
3
28
32

This is working very effectively it will hide text near the file input. – always-a-learner Sep 19 '19 at 06:06

score 6 · Answer 7 · answered Aug 02 '18 at 14:12

using label with label text changed

<input type="file" id="files" name="files" class="hidden"/>
<label for="files" id="lable_file">Select file</label>

add jquery

<script>
     $("#files").change(function(){
        $("#lable_file").html($(this).val().split("\\").splice(-1,1)[0] || "Select file");     
     });
</script>

score 5 · Answer 8 · answered May 27 '15 at 10:26

5

But if you try to remove this tooltip

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

This wont work. Here is my little trick to work this, try title with a space. It will work.:)

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

answered May 27 '15 at 10:26

simon

1,415
10
20

I tested in chrome and all browsers. It is working fine. Can you please test it and verify. – simon Jan 28 '16 at 04:54
6

Tested again in Chrome, Safari, Firefox. It does not work. – AdamInTheOculus Feb 06 '17 at 21:50
I check in chrome Version 56.0.2924.87 it is working perfectly fine. Which version are you using?@PantsMagee – simon Feb 07 '17 at 09:27
It just adds tooltip with text you set at `title` attribute, as I see – Fyodor May 02 '19 at 08:43

score 5 · Answer 9 · answered Mar 22 '17 at 16:13

HTML

  <div class="fileUpload btn btn-primary">
    <label class="upload">
      <input name='Image' type="file"/>
    Upload Image
    </label>
  </div>

CSS

input[type="file"]
{
  display: none;
}
.fileUpload input.upload 
{
    display: inline-block;
}

Note: Btn btn-primary is a class of bootstrap button. However the button may look weired in position. Hope you can fix it by inline css.

score 5 · Answer 10 · answered Nov 16 '21 at 17:26

The following will remove the "No file chosen" text, but leave the "Choose file" pseudo-button intact. Unlike other techniques here, this should have minimal effect on accessibility.

input[type='file'] { font-size: 0; }
::file-selector-button { font-size: initial; }

<input type="file"/>

Raj Chavan · Answer 11 · 2017-07-31T12:09:01.810

 .vendor_logo_hide{
      display: inline !important;;
      color: transparent;
      width: 99px;
    }
    .vendor_logo{
      display: block !important;
      color: black;
      width: 100%; 
    }

$(document).ready(function() {
  // set text to select company logo 
  $("#Uploadfile").after("<span class='file_placeholder'>Select Company Logo</span>");
  // on change
  $('#Uploadfile').change(function() {
    //  show file name 
    if ($("#Uploadfile").val().length > 0) {
      $(".file_placeholder").empty();
      $('#Uploadfile').removeClass('vendor_logo_hide').addClass('vendor_logo');
      console.log($("#Uploadfile").val());
    } else {
      // show select company logo
      $('#Uploadfile').removeClass('vendor_logo').addClass('vendor_logo_hide');
      $("#Uploadfile").after("<span class='file_placeholder'>Select  Company Logo</span>");
    }

  });

});

.vendor_logo_hide {
  display: inline !important;
  ;
  color: transparent;
  width: 99px;
}

.vendor_logo {
  display: block !important;
  color: black;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input type="file" class="vendor_logo_hide" name="v_logo" id='Uploadfile'>
<span class="fa fa-picture-o form-control-feedback"></span>

<div>
  <p>Here defualt no choose file is set to select company logo. if File is selected then it will displays file name</p>
</div>

How would i get the text "Select Company Logo" to display under the button and not on the right side?? — alex, Dec 05 '17 at 09:18

Sathish Kumar · Answer 12 · 2021-04-16T06:08:25.690

4

input[type=file] {
      color: transparent !important;
  }
input[type=file]::before {
    content: "Attach Your CV: ";
    color: black;
    margin-right: 10px; 
}

<input type="file">

please use, after if you want to display the text after the button

edited Apr 16 '21 at 06:08

answered Apr 16 '21 at 05:37

Sathish Kumar

41
3

score 3 · Answer 13 · answered Oct 03 '16 at 08:52

You can try it this way:

<div>
    <label for="user_audio" class="customform-control">Browse Computer</label>
    <input type='file' placeholder="Browse computer" id="user_audio"> <span id='val'></span>
 <span id='button'>Select File</span>
</div>

To show the selected file:

$('#button').click(function () {
    $("input[type='file']").trigger('click');
})

$("input[type='file']").change(function () {
    $('#val').text(this.value.replace(/C:\\fakepath\\/i, ''))
    $('.customform-control').hide();
})

Thanks to @unlucky13 for getting selected file name

Here is working fiddle:

http://jsfiddle.net/eamrmoc7/

score 2 · Answer 14 · answered Apr 14 '13 at 17:04

2

Something like this could work

input(type='file', name='videoFile', value = "Choose a video please")

answered Apr 14 '13 at 17:04

Kevin Lynch

24,427
3
36
37

score 2 · Answer 15 · answered Nov 02 '17 at 10:26

2

Just change the width of the input. Around 90px

<input type="file" style="width: 90px" />

answered Nov 02 '17 at 10:26

nwillo

1,204
9
9

1

It's simple and working fine. Just width is 100px; :) – Sachin Shah Jun 13 '20 at 08:39

score 1 · Answer 16 · edited May 13 '16 at 02:28

1

<div class="field">
    <label class="field-label" for="photo">Your photo</label>
    <input class="field-input" type="file" name="photo"  id="photo" value="photo" />
</div>

and the css

input[type="file"]
{ 
   color: transparent; 
   background-color: #F89406; 
   border: 2px solid #34495e; 
   width: 100%; 
   height: 36px; 
   border-radius: 3px; 
}

edited May 13 '16 at 02:28

Mostafiz

7,243
3
28
42

answered May 12 '16 at 20:45

Ir Calif

460
6
7

1

input[type="file"]{ color: transparent; background-color: #F89406; border: 2px solid #34495e; width: 100%; height: 36px; border-radius: 3px; } – Ir Calif May 12 '16 at 20:47

nikiphoros · Answer 17 · 2022-08-24T06:53:07.347

if you what to makeover the native html input. the check this bellow above jsfiddle link. I have used labels and input and also boostrap 5 for ui

.custom-file input[type="file"] {
    display: none;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

    
    <div class="container mt-5">
      <div class="row">
        <div class="col-sm-8">
          <div class="input-group custom-file">
            <label class="input-group-text" for="file-name">Choose file</label>
            <label class="form-control d-flex justify-content-start align-items-center" for="file-name" >
                <span>Choose a video please</span>
                <div class="spinner-border text-dark spinner-border-sm ms-auto" ></div>
            </label>
            <input type="file" class="form-control" id="file-name" onchange="pressed()"/>
          </div>
        </div>
      </div>
    </div>

While it has too much noise, it's still a good solution in case you're using bootstrap 5 — Inc33, Jan 11 '23 at 04:31

score 0 · Answer 18 · answered Apr 06 '17 at 05:44

0

This will help you to change the name for "no file choose to Select profile picture"

<input type='file'id="files" class="hidden"/>  
<label for="files">Select profile picture</label>

answered Apr 06 '17 at 05:44

the button is gone. – Diansheng Apr 12 '17 at 06:46
this worked just fine for me. Button was gone but clicking the label open files open dialog and you can style to label to make it look like button. It got rid of the annoying "No File Chosen" text. – NoBullMan Dec 08 '17 at 20:03

score 0 · Answer 19 · answered Jan 19 '21 at 11:51

I tried every trick but nothing seemed to work and just resulted in hiding the text with the CSS color property to #fff since my background was #fff. Here is the code :

<input class="form-control upload_profile_pic" 
   type="file" 
   name="userfile" class="form-control" 
    style="color: #fff;">

or

input.form-control.upload_profile_pic {
    color: #fff;
}

score 0 · Answer 20 · answered Jan 17 '22 at 15:36

0

https://dev.to/sadnessojisan/hide-no-file-chosen-of-input-elements-type-file-1bn6

just add color: white to the input element

input[type='file'] {
   color: rgba(0, 0, 0, 0)
}

answered Jan 17 '22 at 15:36

Shani Kehati

427
5
10

score 0 · Answer 21 · answered Apr 18 '23 at 12:03

0

I think you cannot. you can using css to hide that label "No File Choosen"

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

Width can vary depending on your ui. above one worked for me.

answered Apr 18 '23 at 12:03

Heemanshu Bhalla

3,603
1
27
53

Amos · Answer 22 · 2019-04-03T05:41:20.383

I would use "button" instead of "label", hope this help someone.

This will just display a button, user clicked will popup file chooser, after file chose, automatically upload.

<button onclick='<%= "$(\"#" + FileUpload1.ClientID + "\").click(); return false;" %>'>The Text You Want</button>

<asp:FileUpload onchange="$('#btnUpload').click();" ID="FileUpload1" runat="server" style="display: none;" />

<asp:Button ID="btnUpload" ClientIDMode="Static" runat="server" OnClick="btnUpload_Click" style="display: none;" />

DLyons · Answer 23 · 2020-03-25T11:08:29.610

There's a good example (which includes file type validation) at:

https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-example.html

It's basically a fleshed-out version Amos' idea of using a button.

I tried several of the suggestions above with no success (but maybe that's me).

I'm re-purposing it to do an Excel file conversion using

  <form>
    <div>
      <label for="excel_converts">Choose a spreadsheet to convert.</label>
      <input type="file" id="excel_converts" name="excel_converts" accept=".xlsx, .xls, .csv" >
    </div>
    <div class="preview">
      <p>No spreadsheet currently selected for conversion</p>
    </div>
    <div>
      <button>Submit</button>
    </div>
  </form>

So this was downvoted why? Perhaps because in a totally unrelated post I suggested that it was easy to do knee-jerk downvotes but much less easy to be constuctive? — DLyons, Oct 18 '20 at 10:16

Change the "No file chosen":

23 Answers23

Linked

Related