[html] Change the "No file chosen":

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?

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.

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>_x000D_
<input id="fileupload" type="file" name="files[]" multiple style='display: none;'>

It's done, works perfectly :)

Fred

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

Something like this could work

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

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

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

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/

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

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.

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

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>_x000D_
<input type="file" class="vendor_logo_hide" name="v_logo" id='Uploadfile'>_x000D_
<span class="fa fa-picture-o form-control-feedback"></span>_x000D_
_x000D_
<div>_x000D_
  <p>Here defualt no choose file is set to select company logo. if File is selected then it will displays file name</p>_x000D_
</div>

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

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

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

Just change the width of the input. Around 90px

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

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>

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>

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>