How to use Jasny's file upload with Bootstrap 3

Question

So Bootstrap 3 just came out. I prefer it to Bootstrap 2 but I am currently using Jasny\'s extension for file uploads. Is there a way to cherry-pick that feature and use it with

Answer 1

Needed this for a project so this is how I did it. The good news is the major change is in the HTML, as it is possible to adapt the plugin to Bootstrap 3.0 by adding only 5 lines and modifying 4 other in the css of the plugin.

DEMO

Here is the html markup for using fileupload with Bootstrap 3.0:

    

        

            
 
                
            
            

                
                    Select file
                    Change
                    
                Remove
            
        
    

and the changes to the bootstrap-fileupload.css:

.fileupload .uneditable-input {
  display: inline-block;
  margin-bottom: 0px;
  vertical-align: middle;
  cursor: text;
  overflow: hidden;                 /*Added this line*/
  max-height: 34px;                 /*Added this line*/
}
.fileupload .fileupload-preview {   /*Added this line*/
  line-height: 21px;                /*Added this line*/
}                                   /*Added this line*/

as well as

/*==================================*/
/*.fileupload-new .input-append .btn-file {
  -webkit-border-radius: 0 3px 3px 0;
  -moz-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
}*/
/*change to this:*/
.fileupload-new .input-group .btn-file {
  -webkit-border-radius: 0 3px 3px 0 !important;
  -moz-border-radius: 0 3px 3px 0 !important;
  border-radius: 0 3px 3px 0 !important;
}
/*==================================*/

There are most probably optimizations that can be done (some classes in the old css can be deleted, but this would have to be tested) to ameliorate the code but this is what I am using for now as it is quite easy to implement.