Home/ Questions/Q 9018581
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T04:33:47+00:00

Am trying to use fileupload from jasny-bootstrap for edit operation. There are certain pages

  • 0

Am trying to use fileupload from jasny-bootstrap for edit operation. There are certain pages where used is logged in, he/she already uploaded images and I want to be able to render them in order for user to change or remove.

am using the following

http://jasny.github.com/bootstrap/javascript.html#fileupload

with following snippet

<div class="fileupload fileupload-new" data-provides="fileupload">
  <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;"><img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" /></div>
  <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></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 works perfectly on new images, but how can i render existing images? in the manual it says i must use fileupload-exists class instead of fileupload-new, which i tried and it shows the form in edit mode. but image from source is not displayed, please advise

regards,

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Add the image as preview (so in .fileupload-preview) and change the top class to .fileupload-exists.

    <div class="fileupload fileupload-exists" data-provides="fileupload">
  <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">
    <img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" />
  </div>
  <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;">
     <img src="http://jasny.github.com/bootstrap/assets/img/extended-by-jasny.png">
  </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>​

    Also check this fiddle: http://jsfiddle.net/GR2Lt/

    P.S. You currently have to click ‘Remove’ twice. This will be fixed in next version.

    • 0