javascript - Override fineuploader delete behavior? -


iam using http://fineuploader.com/ , delete function. when fineuploader delete file, displays loading image. not want show loading image , instead fade out image. how can override fineupload delete function "design" jquery?

fineuploader html

    <div class="qq-upload-list-selector">         <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">             <div class ="thumbnail">             <div class="gallery-box">             <a href="#" class="qq-upload-delete-selector caption simple-caption delete-single-image just-uploaded">             <span class="qq-upload-delete-selector glyphicon glyphicon-trash"> delete</span>             </a>                 <span class="qq-upload-spinner-selector qq-upload-spinner-overlay">                 <span class="qq-upload-spinner">                 <span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>                 <span class="upload-photo-text">uploading photo...</span>                 </span>                 </span>                 <img class="qq-thumbnail-selector" qq-max-size="250" qq-server-scale>                 <span class="qq-edit-filename-icon-selector qq-edit-filename-icon"></span>             </div>             </div>         </div>     </div> 

fineuploader delete

     deletefile: {          enabled: true,          method: "post",          endpoint: url + "path..."      } 

my on delete javascript (jquery) try override default fineupload delete behavior (not working). delete function still displays loading image , picture doesn't fade out.

.on("delete", function(event, id) {         $(this).parents(".thumbnail").animate("fast")         .animate({ opacity: "hide" }, "slow");     }); 

to react event when delete finished, subscribe deletecomplete event. delete event fired before actual request sent server , deletion processed. deletecomplete event fired after response received server if deletion successful.

to remove default spinner, remove relevant elements template. in case remove:

<span class="qq-upload-spinner-selector qq-upload-spinner-overlay"> <span class="qq-upload-spinner"> 

you then, inside handler, apply class thumbnail element apply css transition element. if delete fails remove class , have transition back.

i think jquery selector incorrect too. note $(this) in context of fine uploader event handler refers jquery-wrapped htmlelement.

to add transition, i'd suggest css transitions rather doing them in javascript.

.qq-thumbnail-selector {     opacity: 1; }  .qq-thumbnail-selector .qq-thumbnail-selector-transition {     opacity: 0;     transition:opacity .5s, transform .5s; } 

note in current version of fine uploader entire contents of "qq-upload-list-selector" removed dom when file deleted. if you'd prefer react change , determine manually whether or not remove element open feature request if considered future release.

also, suggest ditch jquery altogether. adds unnecessary complexity , performance overhead.


Comments