Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Twitter Bootstrap Image Upload with Preview and Progress Bar

How can i use Twitter Bootstrap to upload a single image with preview and progress bar. As currently, Until I save the image, I can not see what any preview or progress bar to upload the image.

like image 384
azeem Avatar asked Dec 02 '12 03:12

azeem


1 Answers

Jasny's fork of Bootstrap allows you to do come close. See documentation.

The code:

<div class="fileupload fileupload-new" data-provides="fileupload">
  <div class="fileupload-preview thumbnail" style="width: 200px; height: 150px;"></div>
  <div>
    <span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span><input type="file" /></span>
    <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
  </div>
</div>

It doesn't seem to have a progress bar, unfortunately.

like image 172
Paul Oliver Avatar answered Oct 19 '22 03:10

Paul Oliver