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?

Colier

find answer here #12035900 – Mf

@MahmoudFarahat I do not want to remove it, I want to change the text – Colier

Can't you remove the text, and put a placeholder label next to it? – Adorl

There is a really tidy answer to this in another post. https://mcmap.net/q/48991/-cross-browser-custom-styling-for-file-upload-button-duplicate – Jerkwater

it is very possible: check out this quick solution -- includes other stuff, just scroll to bottom of CSS: w3schools.com/code/tryit.asp?filename=FWBJX00JSQD7 – Alfalfa

Answer 1

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

Yount

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. – Colier

@Colier Not possible unless you change the css class property. – Conjunction

Answer 2

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.

Monazite

This even works in IE9, where you can't hide the file input and click it from JavaScript. Thanks! – Fermium

Great solution, it even allows for an easy way to customize the field – Dogtrot

Interesting html solution, but bad for usability. The user will always see "Select file" or equivalent, even after selecting a file. – Dvina

You can hide the 'Select file' label after image.onLoad if you do not want user to upload more images. – Monazite

There's a nice recent article with demo that uses this technique. +1 – Pluviometer

How do I show "selected file name" after selecting? – Prison

The only feature I see this omitting is the ability to drag and release a file into the input – Decagon

So much better than other solutions online. – Fawnfawna

Simple, but work perfectly. Even it can be improved with this pen codepen.io/nopr/pen/rpsnd – Bronez

another quick solution: just scroll to bottom of CSS: (pure css - no js or anything based on is person's answer) w3schools.com/code/tryit.asp?filename=FWBJX00JSQD7 – Alfalfa

This answer breaks the drag and drop functionality of a normal file input, how can this functionality be added back? – Borage

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. – Monazite

in HTML: <label ondrop="myScript"> in JavaScript: object.ondrop = function(){myScript}; or object.addEventListener("drop", myScript); – Monazite

Changed nothing – Kinesthesia

How do you make it tabbable i.e. accessible? – Davedaveda

Answer 3

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

Resiniferous

It seems that dragging files doesn't work when you do this. – Mcmath

This is not accessible solution; elements with display:none are not presented to user through assistive technologies. – Insight

Answer 4

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];
    }
};

Theorist

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. – Ame

Answer 5

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

1. Hide your input and add a 'files' button
2. 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

Brownstone

Answer 6

$(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">

Lento

This is working very effectively it will hide text near the file input. – Chaplet

Answer 7

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"/>

Outgoing

Answer 8

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>

Shulins

Answer 9

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=" "/>

Premise

I tested in chrome and all browsers. It is working fine. Can you please test it and verify. – Premise

Tested again in Chrome, Safari, Firefox. It does not work. – Anni

I check in chrome Version 56.0.2924.87 it is working perfectly fine. Which version are you using?@PantsMagee – Premise

It just adds tooltip with text you set at title attribute, as I see – Hanrahan

Answer 10

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.

Direction

Answer 11

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

Heiney

Answer 12

 .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>

Geist

How would i get the text "Select Company Logo" to display under the button and not on the right side?? – Pull

Answer 13

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/

Prison

Answer 14

Something like this could work

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

Leal

Answer 15

Just change the width of the input. Around 90px

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

Homespun

It's simple and working fine. Just width is 100px; :) – Panorama

Answer 16

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/[email protected]/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>

Holsinger

While it has too much noise, it's still a good solution in case you're using bootstrap 5 – Garda

Answer 17

<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; 
}

Englishry

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

Answer 18

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>

Oribel

the button is gone. – Kiona

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. – Rustice

Answer 19

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;
}

Walz

Answer 20

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.

Gawk

Answer 21

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;" />

Cuesta

Answer 22

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>

Ayotte

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? – Ayotte

Answer 23

if you juts want to hide the no file chosen message on hover of input type file then just make it empty

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

Bochum

The question seems pretty clear. They want to change the text next to it, not hide the text in the tooltip. – Quadruplicate