CODEWITHSUNDEEP
jqueryuploadify
RichardB
RichardB

Reputation: 339

Uploadify - Better user experience on upload selection?

I'm trying to make single file uploads better for my users. I currently use Uploadify for all of my image uploads. I have a popup dialog which contains an Uploadify control and a textbox where the user can add comments for the image.

I've set multi=false and queueSizeLimit=1 to constrain Uploadify to one file per upload. So, if a file exists in the queue and the user attempts to select another file, he/she receives an alert message: The number of files selected exceeds the remaining upload limit (0)

I would like to override this default behaviour and replace the file in the queue. (If it is not currently being uploaded). This would be a convenience feature that my users are wanting. It would prevent them from having to manually cancel the file in the queue.

Does anyone know how to implement this behavior?

Upvotes: 0

Views: 970

Answers (1)

mibbler
mibbler

Reputation: 415

Here's my solution:

var selectedFile = null;
$('#example').uploadify({       
    'swf'           : 'uploadify.swf',
    'uploader'      : 'uploadify.php',
    'cancelImg'     : 'cancel.png',
    'multi'         : false,
    'auto'          : false,
    'onSelect'      : function(file) {
        if(selectedFile !== null) {
            $('#example').uploadify("cancel",selectedFile.id);
        }
        selectedFile = file;
    },
    'onCancel' : function(file) {
        $("#" + file.id).hide();
    }

});

First you set a var in the outer scope to keep track of the one file selected, setting it to null initially.

You set multi to false so that only one file at a time can be selected, then use the onSelect function to set the selectedFile var after cancelling the previous queued file if there has been one.

I've also set the onCancel function here, because cancelling a file will, by default, label the file as cancelled and then fade it out after a short delay. Instead, we hide that file's upload bar straight away to make it seem as though the file has been swapped out, when really what we are doing is adding another file to the queue and then getting rid of the previous file.

Upvotes: 3

Related Questions