Search code examples
imagefile-uploadtwitter-bootstrappreview

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.

Solution

  • 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.