PutoTropical PutoTropical - 1 year ago 198
Javascript Question

FineUploader complete callback event fires multiple times

I'm using Fine Uploader as a jQuery plugin in UI mode and I have a drop down list of file types such as image, video, pdf, etc. I'm dynamically changing the allowedExtensions and acceptFiles when the drop down list changes by removing the Fine Uploader generated div and then recreating it like this:

$('#jquery-wrapped-fine-uploader').fineUploader({/* options go here... */});

The dynamic validation works great this way, but I am doing some custom things in the complete callback event such as displaying thumbnails. When the file is uploaded, it fires the complete event for every time the dropdown list had changed prior to the first upload.

My workaround for now is storing the uploaded file name in an array and skipping over the custom complete logic if it already exists in the array.

I don't understand why the complete callback event is firing multiple times since I'm only uploading one file. Is there an explanation for this and/or a way to prevent duplicate callbacks from firing?

Answer Source

There are a couple ways to achieve your goal here:

  1. Remove the Fine Uploader container element from the DOM before re-initializing Fine Uploader. In your fiddle, you were removing an internal element used by Fine Uploader. This will never work. You need to destroy the instance, and the only way to do this when using the jQuery plug-in is to destroy the DOM element that houses the plug-in instance. After you remove the container element, you can then re-add it and re-init Fine Uploader.

  2. Make use of the multiple upload buttons feature. Essentially, you would create an alternate upload button for each file type with appropriate validation settings and change the one that is displayed when the user changes the value of the <select>.