Change the "No file chosen":

HtmlButtonFile UploadPug

Html Problem Overview

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:

https://stackoverflow.com/questions/5927212/i-dont-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?

Html Solutions

Solution 1 - Html

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.

Solution 2 - Html

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

Solution 3 - Html

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

Solution 4 - Html

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

Solution 5 - Html

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

Solution 6 - Html

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

Solution 7 - Html

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

Solution 8 - Html

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.

Solution 9 - Html

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>

Solution 10 - Html

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

Solution 11 - Html

Something like this could work

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

Solution 12 - Html

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/

Solution 13 - Html

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

Solution 14 - Html

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

Solution 15 - Html

Just change the width of the input. Around 90px

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

Solution 16 - Html

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

Solution 17 - Html

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>

Solution 18 - Html

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

Solution 19 - Html

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

just add color: white to the input element

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

Solution 20 - Html

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

Solution 21 - Html

you can use the following css code to hide (no file chosen)

HTML

<input type="file" name="page_logo" id="page_logo">

CSS

input[type="file"]:after {color: #fff}

MAKE SURE THE COLOR IS MATCHING THE BACKGROUND COLOR

Solution 22 - Html

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>
Categories
Recommended Html Solutions
Recommended Button Solutions
Recommended File Upload Solutions
Recommended Pug Solutions

Previous Solution:

create two method for same url pattern with different arguments

SpringSpring Mvc

Next Solution:

How to add new column to MYSQL table?

PhpMysqlAddAlter

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionFranXhView Question on Stackoverflow
Solution 1 - HtmlSKManXView Answer on Stackoverflow
Solution 2 - HtmlOdinView Answer on Stackoverflow
Solution 3 - HtmlJeremy ThilleView Answer on Stackoverflow
Solution 4 - HtmlTommy SteimelView Answer on Stackoverflow
Solution 5 - HtmlFredericView Answer on Stackoverflow
Solution 6 - HtmlIfeanyi ChukwuView Answer on Stackoverflow
Solution 7 - HtmlsimonView Answer on Stackoverflow
Solution 8 - HtmlNaeem Moavia SiddiquiView Answer on Stackoverflow
Solution 9 - Htmlkelvin kantariaView Answer on Stackoverflow
Solution 10 - HtmlRaj ChavanView Answer on Stackoverflow
Solution 11 - HtmlKevin LynchView Answer on Stackoverflow
Solution 12 - HtmlkittuView Answer on Stackoverflow
Solution 13 - HtmlSathish KumarView Answer on Stackoverflow
Solution 14 - HtmlIr CalifView Answer on Stackoverflow
Solution 15 - HtmlnwilloView Answer on Stackoverflow
Solution 16 - HtmljameshfisherView Answer on Stackoverflow
Solution 17 - Htmluser6097020View Answer on Stackoverflow
Solution 18 - HtmlNJENGAHView Answer on Stackoverflow
Solution 19 - HtmlShani KehatiView Answer on Stackoverflow
Solution 20 - HtmlAmosView Answer on Stackoverflow
Solution 21 - HtmlMidz ElwekilView Answer on Stackoverflow
Solution 22 - HtmlDLyonsView Answer on Stackoverflow