How to use Jasny's file upload with Bootstrap

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 Bootstrap 3?

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:

<div class="form-group">
    <div class="fileupload fileupload-new" data-provides="fileupload">
        <div class="input-group">
            <div class="form-control uneditable-input"><i class="icon-file fileupload-exists"></i> 
                <span class="fileupload-preview"></span>
            </div>
            <div class="input-group-btn">
                <a class="btn btn-default btn-file">
                    <span class="fileupload-new">Select file</span>
                    <span class="fileupload-exists">Change</span>
                    <input type="file" class="file-input"/></a>
                <a href="#" class="btn btn-default fileupload-exists" data-dismiss="fileupload">Remove</a>
            </div>
        </div>
    </div>
</div>

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.

Answer 2

When you only want the file upload plugin i will work basically, see: http://bootply.com/72995

You could download the plugin from: http://bootstrap-server.jasny.net/bootstrap-fileupload.zip You will got the javascript and css files needed. Or you could download: the file-upload.less and file-upload.js files from http://jasny.github.io/bootstrap/

Use this guide: http://www.bootply.com/migrate-to-bootstrap-3 to make your html compatible with Twitter's Bootstrap 3. (change classes like input-append in your css file too).

Good luck

Answer 3

if you want only bootstraped file input with bootstrap3 you can try this
http://www.abeautifulsite.net/blog/2013/08/whipping-file-inputs-into-shape-with-bootstrap-3/