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  39 t want to see   39 no file chosen  39  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

User · Answer

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      lt form gt       lt div gt         lt label for  excel converts  gt Choose a spreadsheet to convert  lt  label gt         lt input type  file  id  excel converts  name  excel converts  accept   xlsx   xls   csv   gt       lt  div gt       lt div class  preview  gt         lt p gt No spreadsheet currently selected for conversion lt  p gt       lt  div gt       lt div gt         lt button gt Submit lt  button gt       lt  div gt     lt  form gt

User · Answer

You can try it this way    lt div gt       lt label for  user audio  class  customform-control  gt Browse Computer lt  label gt       lt input type  file  placeholder  Browse computer  id  user audio  gt   lt span id  val  gt  lt  span gt    lt span id  button  gt Select File lt  span gt   lt  div gt    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

User · Answer

you can use the following css code to hide  no file chosen  HTML  lt input type  quot file quot  name  quot page logo quot  id  quot page logo quot  gt   CSS input type  quot file quot   after  color   fff   MAKE SURE THE COLOR IS MATCHING THE BACKGROUND COLOR

User · Answer

x000D   x000D    function      x000D          input type  file     change function      x000D            if    this  val            x000D                     this  css  color     333    x000D             else  x000D                     this  css  color    transparent    x000D              x000D           x000D     x000D  input type  file    x000D      color  transparent  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt input type  file  name  app cvupload  class  fullwidth input rqd  gt  x000D   x000D   x000D

User · Answer

Try this its just a trick   lt input type  file  name  uploadfile  id  img  style  display none    gt   lt label for  img  gt Click me to upload image lt  label gt    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

User · Answer

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     x000D   x000D      addfiles   on  click   function         fileupload   click   return false     x000D   lt button class  addfiles  gt Add Files lt  button gt  x000D   lt input id  fileupload  type  file  name  files    multiple style  display  none   gt  x000D   x000D   x000D    It s done  works perfectly     Fred

User · Answer

lt div class  field  gt       lt label class  field-label  for  photo  gt Your photo lt  label gt       lt input class  field-input  type  file  name  photo   id  photo  value  photo    gt   lt  div gt    and the css  input type  file         color  transparent      background-color   F89406      border  2px solid  34495e      width  100       height  36px      border-radius  3px

User · Answer

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     lt input class  quot form-control upload profile pic quot      type  quot file quot      name  quot userfile quot  class  quot form-control quot       style  quot color   fff  quot  gt   or input form-control upload profile pic       color   fff

User · Answer

Just change the width of the input  Around 90px   lt input type  file  style  width  90px    gt

User · Answer

http   jsfiddle net ZDgRG   See above link  I use css to hide the default text and use a label to show what I want    lt div gt  lt input type  file  title  Choose a video please  id  aa  onchange  pressed    gt  lt label id  fileLabel  gt Choose file lt  label gt  lt  div gt   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

User · Answer

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

User · Answer

This will help you to change the name for  no file choose to Select profile picture    lt input type  file id  files  class  hidden   gt     lt label for  files  gt Select profile picture lt  label gt

User · Answer

Something like this could work  input type  file   name  videoFile   value    Choose a video please

User · Answer

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    lt input type  file  id  files  class  hidden   gt   lt label for  files  gt Select file lt  label gt    Then style the label as a button if you want

User · Answer

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    lt button onclick   lt              FileUpload1 ClientID        click    return false     gt   gt The Text You Want lt  button gt    lt asp FileUpload onchange      btnUpload   click     ID  FileUpload1  runat  server  style  display  none     gt    lt asp Button ID  btnUpload  ClientIDMode  Static  runat  server  OnClick  btnUpload Click  style  display  none     gt

User · Answer

But if you try to remove this tooltip    lt input type  file  title     gt    This wont work  Here is my little trick to work this  try title with a space  It will work      lt input type  file  title      gt

User · Answer

vendor logo hide        display  inline  important         color  transparent        width  99px             vendor logo        display  block  important        color  black        width  100             x000D   x000D    document  ready function     x000D       set text to select company logo  x000D        Uploadfile   after   lt span class  file placeholder  gt Select Company Logo lt  span gt     x000D       on change x000D        Uploadfile   change function     x000D          show file name  x000D      if      Uploadfile   val   length  gt  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   lt span class  file placeholder  gt Select  Company Logo lt  span gt     x000D        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    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 0 3 jquery min js  gt  lt  script gt  x000D   lt input type  file  class  vendor logo hide  name  v logo  id  Uploadfile  gt  x000D   lt span class  fa fa-picture-o form-control-feedback  gt  lt  span gt  x000D   x000D   lt div gt  x000D     lt p gt Here defualt no choose file is set to select company logo  if File is selected then it will displays file name lt  p gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

using label with label text changed   lt input type  file  id  files  name  files  class  hidden   gt   lt label for  files  id  lable file  gt Select file lt  label gt    add jquery   lt script gt           files   change function                lable file   html   this  val   split       splice -1 1  0      Select file                   lt  script gt

User · Answer

HTML     lt div class  fileUpload btn btn-primary  gt       lt label class  upload  gt         lt input name  Image  type  file   gt      Upload Image      lt  label gt     lt  div gt    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

[html] Change the "No file chosen":

Examples related to html

Examples related to button

Examples related to file-upload

Examples related to pug