Twitter Bootstrap Form File Element Upload Button

Question

Why isn t there a fancy file element upload button for twitter bootstrap  It would be sweet if the blue primary button was implemented for the upload button  Is it even possible to finesse the upload button using CSS   seems like a native browser element that can t be manipulated

User · Answer

Based on the absolutely brilliant  claviska solution  to whom all the credit is owed   Full featured Bootstrap 4 file input with validation and help text   Based on the input group example we have a dummy input text field used for displaying the filename to the user  which gets populated from the onchange event on the actual input file field hidden behind the label button  Aside from including the bootstrap 4 validation support we ve also made it possible to click anywhere on the input to open the file dialog   Three states of the file input  The three possible states are un-validated  valid and invalid with the dummy html input tag attribute required set     Html markup for the input  We introduce only 2 custom classes input-file-dummy and input-file-btn to properly style and wire the desired behaviour  Everything else is standard Bootstrap 4 markup    lt div class  input-group  gt     lt input type  text  class  form-control input-file-dummy  placeholder  Choose file  aria-describedby  fileHelp  required gt     lt div class  valid-feedback order-last  gt File is valid lt  div gt     lt div class  invalid-feedback order-last  gt File is required lt  div gt     lt label class  input-group-append mb-0  gt       lt span class  btn btn-primary input-file-btn  gt        Browse     lt input type  file  hidden gt       lt  span gt     lt  label gt   lt  div gt   lt small id  fileHelp  class  form-text text-muted  gt Choose any file you like lt  small gt    JavaScript behavioural provisions  The dummy input needs to be read only  as per the original example  to prevent the user from changing the input which may only be changed via the open file dialog  Unfortunately validation does not occur on readonly fields so we toggle the editability of the input on focus and blur   jquery events onfocusin and onfocusout  and ensure that it becomes validatable again once a file is selected   Aside from also making the text field clickable  by triggering the button s click event  the rest of the functionality of populating the dummy field was envisioned by  claviska     function            input-file-dummy   each function              this  parent   find   input-file-btn input    on  change    dummy  this   function ev            ev data dummy           val   this  val   replace     g       replace                       trigger  focusout                  this  on  focusin   function                this  attr  readonly                 on  focusout   function                this  removeAttr  readonly             on  click   function                this  parent   find   input-file-btn   click                          Custom style tweaks  Most importantly we don t want the readonly field to jump between grey background and white so we ensure it stays white  The span button doesn t have a pointer cursor but we need to add one for the input anyway    input-file-dummy   input-file-btn     cursor  pointer     input-file-dummy readonly      background-color  white      nJoy

User · Answer

Bootstrap 3 filestyle    http   dev tudosobreweb com br bootstrap-filestyle        Copyright  c  2013 Markus Vinicius da Silva Lima    Update bootstrap 3 by Paulo Henrique Foxer    Version 2 0 0    Licensed under the MIT license           function        use strict    var Filestyle   function  element  options        this options   options      this  elementFilestyle           this  element     element       Filestyle prototype         clear  function              this  element val              this  elementFilestyle find   text   val                  destroy  function              this  element              removeAttr  style                removeData  filestyle                val              this  elementFilestyle remove                icon  function  value            if  value     true                if   this options icon                    this options icon   true                  this  elementFilestyle find  label   prepend this htmlIcon                             else if  value     false                if  this options icon                    this options icon   false                  this  elementFilestyle find  i   remove                            else               return this options icon                        input  function  value            if  value     true                if   this options input                    this options input   true                  this  elementFilestyle prepend this htmlInput                      var content                           files                       if  this  element 0  files     undefined                        files 0      name   this  element 0  value                     else                       files   this  element 0  files                                     for  var i   0  i  lt  files length  i                          content    files i  name split       pop                                             if  content                               this  elementFilestyle find   text   val content replace       g                                                  else if  value     false                if  this options input                    this options input   false                  this  elementFilestyle find   text   remove                            else               return this options input                        buttonText  function  value            if  value     undefined                this options buttonText   value              this  elementFilestyle find  label span   html this options buttonText             else               return this options buttonText                        classButton  function  value            if  value     undefined                this options classButton   value              this  elementFilestyle find  label   attr   class   this options classButton                if  this options classButton search  btn-inverse btn-primary btn-danger btn-warning btn-success i      -1                    this  elementFilestyle find  label i   addClass  icon-white                  else                   this  elementFilestyle find  label i   removeClass  icon-white                            else               return this options classButton                        classIcon  function  value            if  value     undefined                this options classIcon   value              if  this options classButton search  btn-inverse btn-primary btn-danger btn-warning btn-success i      -1                    this  elementFilestyle find  label   find  i   attr   class    icon-white   this options classIcon                  else                   this  elementFilestyle find  label   find  i   attr   class   this options classIcon                            else               return this options classIcon                        classInput  function  value            if  value     undefined                this options classInput   value              this  elementFilestyle find   text   addClass this options classInput             else               return this options classInput                        htmlIcon  function              if  this options icon                var colorIcon                   if  this options classButton search  btn-inverse btn-primary btn-danger btn-warning btn-success i      -1                    colorIcon     icon-white                               return   lt i class    colorIcon this options classIcon    gt  lt  i gt               else               return                           htmlInput  function              if  this options input                return   lt input type  text  class    this options classInput    style  width    this options inputWidthPorcent     important display  inline  important   disabled gt               else               return                           constructor  function              var  self   this              html                   id   this  element attr  id                files                if  id            id                id    filestyle-      bootstrap-filestyle   length              this  element attr   id   id                       html   this htmlInput                   lt label for    id    class    this options classButton    gt                    this htmlIcon                      lt span gt   this options buttonText   lt  span gt                   lt  label gt             this  elementFilestyle       lt div class  bootstrap-filestyle  style  display  inline   gt   html   lt  div gt              var  label   this  elementFilestyle find  label            var  labelFocusableContainer    label parent              labelFocusableContainer              attr  tabindex    0                keypress function e                    if  e keyCode     13    e charCode     32                         label click                                                  hidding input file and add filestyle         this  element              css   position   absolute   left   -9999px                 attr  tabindex    -1                after this  elementFilestyle               Getting input file value         this  element change function                  var content                   if  this files     undefined                    files 0      name   this value                 else                   files   this files                             for  var i   0  i  lt  files length  i                      content    files i  name split       pop                                      if  content                            self  elementFilestyle find   text   val content replace       g                                              Check if browser is Firefox         if  window navigator userAgent search  firefox i   gt  -1                   Simulating choose file for firefox             this  elementFilestyle find  label   click function                       self  element click                    return false                                      var old     fn filestyle     fn filestyle   function  option  value        var get               element   this each function                  if    this  attr  type        file                     var  this     this                       data    this data  filestyle                        options     extend       fn filestyle defaults  option  typeof option      object   amp  amp  option                    if   data                         this data  filestyle    data   new Filestyle this  options                         data constructor                                       if  typeof option      string                         get   data option  value                                                    if  typeof get     undefined            return get        else           return element              fn filestyle defaults          buttonText    Escolher arquivo        input   true       icon   true       inputWidthPorcent   65       classButton    btn btn-primary        classInput    form-control file-input-button        classIcon    icon-folder-open        fn filestyle noConflict   function            fn filestyle   old      return this         Data attributes register     filestyle   each function          var  this     this           options                  buttonText    this attr  data-buttonText                 input    this attr  data-input        false    false   true               icon    this attr  data-icon        false    false   true               classButton    this attr  data-classButton                 classInput    this attr  data-classInput                 classIcon    this attr  data-classIcon                    this filestyle options          window jQuery

User · Answer

Here is alternate trick  it s not the best solution but it just give you a choice  HTML code    lt button clss  btn btn-primary  id  btn upload  gt Choose File lt  button gt   lt input id  fileupload  class  hide  type  file  name  files    gt    Javascript       btn upload   click function e   e preventDefault        fileupload   trigger  click

User · Answer

A simple solution with acceptable outcome    lt input type  file  class  form-control  gt    And the style   input type file  form-control       height  auto

User · Answer

I thought I d add my threepence worth  just to say how the default  custom-file-label and custom-file-input BS4 file input and how that can be used   The latter class is on the input group and is not visible  While the former is the visible label and has a  after pseudoelement that looks like a button    lt div class  custom-file  gt   lt input type  file  class  custom-file-input  id  upload  gt   lt label class  custom-file-label  for  upload  gt Choose file lt  label gt   lt  div gt    You cannot add classes to psuedoelements  but you can style them in CSS  or SASS     custom-file-label after       color   fff      background-color   1e7e34      border-color   1c7430      pointer  cursor

User · Answer

Simplified answer using parts from other answers  primarily user2309766 and dotcomsuperstar   Features    Uses Bootstrap button addon for button and field  Only one input  multiple inputs would be picked up by a form  No extra css except  display  none   to hide the file input  Visible button fires click event for hidden file input  split to remove file path uses regex and delimiters     and        Code    x000D   x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 4 js bootstrap min js  gt  lt  script gt  x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 4 css bootstrap min css  rel  stylesheet   gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt div class  input-group  gt  x000D     lt span class  input-group-btn  gt  x000D       lt span class  btn btn-primary  onclick    this  parent   find  input type file    click     gt Browse lt  span gt  x000D       lt input name  uploaded file  onchange    this  parent   parent   find   form-control   html   this  val   split           pop      style  display  none   type  file  gt  x000D     lt  span gt  x000D     lt span class  form-control  gt  lt  span gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Upload buttons are a pain to style because it styles the input and not the button   but you can use this trick   http   www quirksmode org dom inputfile html  Summary    Take a normal  lt input type  file  gt  and put it in an element with position  relative   To this same parent element  add a normal  lt input gt  and an image  which have the correct styles  Position these elements absolutely  so that they occupy the same place as the  lt input type  file  gt    Set the z-index of the  lt input type  file  gt  to 2 so that it lies on top of the styled input image   Finally  set the opacity of the  lt input type  file  gt  to 0  The  lt input type  file  gt  now becomes effectively invisible  and the styles input image shines through  but you can still click on the  Browse  button  If the button is positioned on top of the image  the user appears to click on the image and gets the normal file selection window   Note that you can t use visibility  hidden  because a truly invisible element is unclickable  too  and we need the  to remain clickable

User · Answer

No fancy shiz required   HTML    lt form method  post  action   api admin image  enctype  multipart form-data  gt       lt input type  hidden  name  url  value   lt    boxes i  url   gt     gt       lt input class  image-file-chosen  type  text    gt       lt br   gt       lt input class  btn image-file-button  value  Choose Image    gt       lt input class  image-file hide  type  file  name  image   gt   lt  -- Hidden -- gt       lt br   gt       lt br   gt       lt input class  btn  type  submit  name  image  value  Upload    gt       lt br   gt   lt  form gt    JS       image-file-button   each function             this  off  click   on  click   function                  this  siblings   image-file   trigger  click                      image-file   each function             this  change function                   this  siblings   image-file-chosen   val this files 0  name                   CAUTION  The three form elements in question MUST be siblings of each other   image-file-chosen   image-file-button   image-file

User · Answer

I have the same problem  and i try it like this    lt div gt   lt button type  button  class  btn btn-info btn-file  gt Browse lt  button gt   lt input type  file  name  image   gt   lt  div gt    The CSS   lt style gt   btn-file       position absolute     lt  style gt    The JS   lt script gt    document  ready function            btn-file   click function               input name  image     click                 lt  script gt       Note     The button  btn-file must in the same tag as the input file   Hope you found the best solution

User · Answer

Please check out Twitter Bootstrap File Input  It use very simple solution  just add one javascript file and and paste following code      input type file    bootstrapFileInput

User · Answer

I use http   gregpike net demos bootstrap-file-input demo html      input type file    bootstrapFileInput      or      file-inputs   bootstrapFileInput

User · Answer

Im surprised there was no mention of the  lt label gt  element  Solution   lt label class  quot btn btn-primary quot  for  quot my-file-selector quot  gt       lt input id  quot my-file-selector quot  type  quot file quot  class  quot d-none quot  gt      Button Text Here  lt  label gt   No need for any JS  or funky css    Solution for including the filename   lt label class  quot btn btn-primary quot  for  quot my-file-selector quot  gt       lt input id  quot my-file-selector quot  type  quot file quot  style  quot display none quot       onchange  quot     upload-file-info   text this files 0  name  quot  gt      Button Text Here  lt  label gt   lt span class  label label-info  id  quot upload-file-info quot  gt  lt  span gt   The solution above requires jQuery  Note  use   text   when displaying user-supplied content on the page  An earlier version of this answer used   html   which is not safe     filenames can contain HTML markup

User · Answer

In respect of claviska answer - if you want to show uploaded file name in a basic file upload you can do it in inputs  onchange event  Just use this code     lt label class  btn btn-default  gt                      Browse                         lt span id  uploaded-file-name  style  font-style  italic  gt  lt  span gt                       lt input id  file-upload  type  file  name  file                             onchange      uploaded-file-name   text     file-upload   0  value    hidden gt    lt  label gt    This jquery JS code is responsible will retrieving uploaded file name       file-upload   0  value   Or with vanilla JS   document getElementById  file-upload   value

User · Answer

I modified  claviska answer and works as i like  Bootstrap 3  4 not tested     lt label class  btn btn-default  gt       lt span gt Browse lt  span gt       lt input type  file  style  display  none   onchange    this  prev  span   text   this  val         this  val    Browse    gt   lt  label gt

User · Answer

With no additional plugin required  this bootstrap solution works great for me    lt div style  position relative   gt           lt a class  btn btn-primary  href  javascript    gt              Choose File                 lt input type  file  style  position absolute z-index 2 top 0 left 0 filter  alpha opacity 0  -ms-filter  progid DXImageTransform Microsoft Alpha Opacity 0   opacity 0 background-color transparent color transparent   name  file source  size  40   onchange      upload-file-info   html   this  val      gt           lt  a gt           amp nbsp           lt span class  label label-info  id  upload-file-info  gt  lt  span gt   lt  div gt    demo    http   jsfiddle net haisumbhatti cAXFA 1   bootstrap 2     http   jsfiddle net haisumbhatti y3xyU     bootstrap 3

User · Answer

http   markusslima github io bootstrap-filestyle       file   filestyle      OR   lt input type  file  class  filestyle  data-input  false  gt

User · Answer

This works perfectly for me   lt span gt       lt input  type  file               style  visibility hidden  width  1px                id    multipartFilePath   name    multipartFilePath                 onchange    this  parent   find  span   html   this  val   replace  C   fakepath              gt   lt  -- Chrome security returns  C  fakepath    -- gt       lt input class  btn btn-primary  type  button  value  Upload File    onclick    this  parent   find  input type file    click      gt   lt  -- on button click fire the file click event -- gt       amp nbsp       lt span  class  badge badge-important   gt  lt  span gt   lt  span gt

User · Answer

Try following in the Bootstrap v 3 3 4   lt div gt       lt input id  uplFile  type  file  style  display  none   gt        lt div class  input-group  style  width  300px   gt           lt div  id  btnBrowse   class  btn btn-default input-group-addon  gt Select a file    lt  div gt           lt span id  photoCover  class  form-control  gt       lt  div gt   lt  div gt    lt script type  text javascript  gt          uplFile   change function                 photoCover   text   this  val                      btnBrowse   click function                uplFile   click             lt  script gt

User · Answer

Here s a solution for Bootstrap 3 and 4  To make a functional file input control that looks like a button  you only need HTML  HTML  lt label class  quot btn btn-default quot  gt      Browse  lt input type  quot file quot  hidden gt   lt  label gt   This works in all modern browsers  including IE9   If you need support for old IE as well  please use the legacy approach shown below  This techniques relies on the HTML5 hidden attribute  Bootstrap 4 uses the following CSS to shim this feature in unsupportive browsers  You may need to add if you re using Bootstrap 3   hidden      display  none  important      Legacy approach for old IE If you need support for IE8 and below  use the following HTML CSS  HTML  lt span class  quot btn btn-default btn-file quot  gt      Browse  lt input type  quot file quot  gt   lt  span gt   CSS  btn-file       position  relative      overflow  hidden     btn-file input type file        position  absolute      top  0      right  0      min-width  100       min-height  100       font-size  100px      text-align  right      filter  alpha opacity 0       opacity  0      outline  none      background  white      cursor  inherit      display  block     Note that old IE doesn t trigger the file input when you click on a  lt label gt   so the The CSS  quot bloat quot  does a couple things to work around that   Makes the file input span the full width height of the surrounding  lt span gt  Makes the file input invisible   Feedback  amp  Additional Reading I ve posted more details about this method  as well as examples for how to show the user which how many files are selected  https   www abeautifulsite net posts whipping-file-inputs-into-shape-with-bootstrap-3

User · Answer

this is the best file upload style I like    lt div class  fileupload fileupload-new  data-provides  fileupload  gt     lt div class  input-append  gt       lt div class  uneditable-input span3  gt  lt i class  icon-file fileupload-exists  gt  lt  i gt   lt span class  fileupload-preview  gt  lt  span gt  lt  div gt  lt span class  btn btn-file  gt  lt span class  fileupload-new  gt Select file lt  span gt  lt span class  fileupload-exists  gt Change lt  span gt  lt input type  file    gt  lt  span gt  lt a href     class  btn fileupload-exists  data-dismiss  fileupload  gt Remove lt  a gt     lt  div gt   lt  div gt    you can get demo and more styles at   http   www jasny net bootstrap javascript  fileinput  but using this  you should replace twitter bootstrap with jasny bootstrap files    regards

User · Answer

The following code makes as above the picture  Html   lt form gt   lt div class  row  gt   lt div class  col-lg-6  gt   lt label for  file  gt   lt div class  input-group  gt   lt span class  input-group-btn  gt   lt button class  btn btn-default  type  button  gt Browse lt  button gt   lt  span gt   lt input type  text  class  form-control  id  info  readonly    style  background   fff   placeholder  Search for     gt   lt  div gt  lt  --  input-group -- gt   lt  label gt   lt  div gt  lt  --   col-lg-6 -- gt   lt  div gt    lt  div gt   lt input type  file  style  display  none   onchange      info   val   this  val   split           pop       name  file  id  file  gt   lt  form gt    Javascript   lt script type  text javascript  gt     function            label for file    click function event            event preventDefault                file   click                  lt  script gt

User · Answer

Works for me     Pretty file input field in Bootstrap   Update  jQuery plugin style      Based in  http   duckranger com 2012 06 pretty-file-input-field-in-bootstrap     Version  0 0 3    Compatibility with  Bootstrap 3 2 0 and jQuery 2 1 1    Use          lt input class  nice file field  type  file  data-label  Choose Document  gt          lt script gt      nice file field   niceFileField     lt  script gt      function            fn niceFileField   function         this each function index  file field          file field     file field         var label   file field attr  data-label       Choose File          file field css   display    none            nice file block text      lt div class  input-group nice file block  gt          nice file block text        lt input type  text  class  form-control  gt          nice file block text        lt span class  input-group-btn  gt          nice file block text         lt button class  btn btn-default nice file field button  type  button  gt     label     lt  button gt          nice file block text        lt  span gt          nice file block text      lt  div gt           file field after nice file block text          var nice file field button   file field parent   find   nice file field button          var nice file block element   file field parent   find   nice file block           nice file field button on  click   function    console log  click    file field click              file field change  function            nice file block element find  input   val file field val                                jQuery

User · Answer

It s included in Jasny s fork of bootstrap   A simple upload button can be created using   lt span class  btn btn-file  gt Upload lt input type  file    gt  lt  span gt    With the fileupload plugin you can create more advanced widgets  Have a look at http   jasny github io bootstrap javascript  fileinput

User · Answer

Solution for multiple upload  I tweaked two previous answers to include multiple uploads  In this way the label shows the file name  if only one is selected  or x files in the opposite case    lt label class  btn btn-primary  for  my-file-selector  gt       lt input id  my-file-selector  type  file  multiple  multiple  style  display none          onchange      upload-file-info   html               this files length  gt  1    this files length     files    this files 0  name   gt                           Files amp hellip   lt  label gt   lt span class  label label-info  id  upload-file-info  gt  lt  span gt      It may also apply to change the button text and class    lt label class  btn btn-primary  for  multfile  gt       lt input id  multfile  type  file  multiple  multiple  style  display none          onchange      multfile-label   html               this files length    1    this files 0  name   this files length     files                  this  parent   addClass  btn-success    gt       lt span id  multfile-label  gt Files amp hellip  lt  span gt   lt  label gt

User · Answer

With some inspiration from other posts above  here is a full solution that combines what looks like a form-control field with an input-group-addon for a clean file input widget that includes a link to the current file    x000D   x000D   input-file   position  relative  margin  60px 60px 0      Remove margin  it is just for stackoverflow viewing    x000D   input-file  input-group-addon   border  0px  padding  0px    x000D   input-file  input-group-addon  btn   border-radius  0 4px 4px 0   x000D   input-file  input-group-addon input   cursor  pointer  position absolute  width  72px  z-index 2 top 0 right 0 filter  alpha opacity 0  -ms-filter  progid DXImageTransform Microsoft Alpha Opacity 0   opacity 0  background-color transparent  color transparent    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 1 css bootstrap min css  gt  x000D   lt div class  input-group input-file  gt  x000D     lt div class  form-control  gt  x000D       lt a href   path to your current file name pdf  target   blank  gt current file name pdf lt  a gt  x000D     lt  div gt  x000D     lt span class  input-group-addon  gt  x000D       lt a class  btn btn-primary  href  javascript    gt  x000D        Browse x000D         lt input type  file  name  field name  onchange    this  parent   parent   parent   find   form-control   html   this  val      gt  x000D       lt  a gt  x000D     lt  span gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I have Created a Custom upload button to accept only images  which can be modified as per your requirement   Hope this helps        Used Bootstrap framework   Codepen-link  HTML   lt center gt    lt br   gt    lt br   gt    lt span class  head  gt Upload Button Re-Imagined lt  span gt    lt br   gt    lt br   gt    lt div class  fileUpload blue-btn btn width100  gt      lt span gt Upload your Organizations logo lt  span gt      lt input type  file  class  uploadlogo    gt    lt  div gt   lt  center gt    CSS    head      font-size  25px     font-weight  200        blue-btn hover    blue-btn active    blue-btn focus    blue-btn      background  transparent     border  solid 1px  27a9e0     border-radius  3px     color   27a9e0     font-size  16px     margin-bottom  20px     outline  none  important     padding  10px 20px        fileUpload      position  relative     overflow  hidden     height  43px     margin-top  0        fileUpload input uploadlogo      position  absolute     top  0     right  0     margin  0     padding  0     font-size  20px     cursor  pointer     opacity  0     filter  alpha opacity 0      width  100      height  42px          Chrome fix     input  -webkit-file-upload-button      cursor  pointer  important       JS     You can modify the upload files to pdf s  docs etc   Currently it will upload only images   document  ready function            Upload btn       uploadlogo   change function         readURL this            function readURL input        var url   input value      var ext   url substring url lastIndexOf        1  toLowerCase        if  input files  amp  amp  input files 0   amp  amp   ext     png     ext     jpeg     ext     jpg     ext     gif     ext     svg            var path       uploadlogo   val          var filename   path replace                         fileUpload span   html  Uploaded logo       filename            console log filename         else             uploadlogo   val                fileUpload span   html  Only Images Are Allowed

[css] Twitter Bootstrap Form File Element Upload Button

Full featured Bootstrap 4 file input with validation and help text.

Three states of the file input

Html markup for the input

JavaScript behavioural provisions

Custom style tweaks

Examples related to css

Examples related to forms

Examples related to twitter-bootstrap

Examples related to input-type-file