11

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?

Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
emersonthis
  • 32,822
  • 59
  • 210
  • 375
  • Given the heavy number of changes in Bootstrap 3, it's very unlikely there's an easy way. I'd imagine Bootstrap 3 support would already be right there on Jasny's site if it were that easy. – Will Eddins Aug 08 '13 at 19:11
  • 1
    You could try using the "customize" page [SEE HERE](http://jasny.github.io/bootstrap/customize.html#plugins) to only download the File Upload scripts and add that into your Bootstrap 3 project. It might work... – Schmalzy Aug 08 '13 at 20:48
  • The plugin (renamed to 'file input') is now also available for Bootstrap 3. – Arnold Daniels Nov 24 '13 at 13:19

3 Answers3

11

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

Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
8

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.

edsioufi
  • 8,297
  • 3
  • 36
  • 42
  • Interesting. I just used the original bootstrap-fileupload.css and it worked. What did you encounter that required tweaking the css? – emersonthis Aug 14 '13 at 11:37
  • 1
    [Here](http://jsfiddle.net/FFABG/4/). Check the "Select file" left border: it is not round. This is fixed by the "as well as". Also, try to select a file with a long file name and resize the window so that there is overflow. This is fixed by the css additions. – edsioufi Aug 14 '13 at 11:42
  • @Emerson also the solution to the overflow adapts to the new way controls react in Bootstrap 3 (dynamic full width instead of fixed width). – edsioufi Aug 14 '13 at 11:54
  • Cool. I'll check it out. – emersonthis Aug 14 '13 at 12:13
  • 4
    the file dialog doesn't open for me with that html? – daniel Sep 03 '13 at 19:18
  • @zoidbergi Does it work with the jsFiddle demo provided in the answer? If it does, then you should probably debug your code. Otherwise, what browser are you using? – edsioufi Sep 03 '13 at 21:13
  • Hei @edsioufi This is GENUIS. But anyways, sometimes the Change & Delete Button slip away in my browser. Is that like thath (do you have a solution) or is it just me who made something wrong? Sorry for my bad english. – Teifun2 Oct 09 '13 at 00:11
  • @Teifun2 There is no easy solution, this is due to the way inputs are displayed in an input-group in BS3. But this only happens for very small resolutions (width under 262px). For smaller screens, the upload control is not practical anyways so you would have to find another solution (maybe replace "Change" and "Remove" with small icons to save space, or make the input smaller...) – edsioufi Oct 09 '13 at 09:24
4

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/

patie
  • 1,074
  • 1
  • 10
  • 18