Blueimp File Upload Plugin uploads only once

Question

I have this strange issue and I've tried several solutions (even implementing the same as the Basic Plus demo on their website). I can upload files just fine, single or multiple. They upload on a click of the individual item, or a "Upload All" button. The problem is trying to add additional files before or after uploading. The file upload plugin will not even detect that these files are changing in the file input, so it never fires the "fileuploadadd" event, and requires me to refresh the page in order to upload more files. I'm wondering whether the fileupload change event is being lost somewhere, but I cannot for the life of me figure out where.

Also, does the blueimp file upload plugin require a specific return format of JSON? At the minute, I'm just returning "{\"status\":\"success\"} if the uploads are a success, and a similar error message. EDIT: Changing the response format to examples shown by blueimp had no effect.

Here's some code for the uploader I'm using. Note that I'm currently using ASP.NET and jQuery 2.0.3, and jQuery UI 1.9.2.

function initFileUploader() {
    //initProgressBars();
    $(upload_progressbar_title).css('display', 'none');
    $(upload_progressbar).css('display', 'none');
    $(upload_upload).on('click', function () {
        $(upload_progressbar).css('display', 'block');
        $(upload_progressbar_title).css('display', 'block');
        $('.uploadbtn').click();
    });
    $(upload_browse).on('click', function () {
        $(upload_file).click();
        return false;
    });

    $.guid = 0;
    console.log('initialising file upload');

    var uploadButton = $('<input type="button" id="button" />')
        .addClass('button tiny').addClass('uploadbtn')
        .prop('disabled', true)
        .val('Processing...');

    var uploadCon = $('<div class="small-4  medium-6 large-6 columns progresscontainer" />')
            .append('<div class="progressbar" />')
            .append('<label class="progressbarlabel">Not uploading</label>');

    uploadCon.append($(uploadButton).on('click', function () {
        var $this = $(this),
            data = $this.parent().data();
        $this
            .off('click')
            .val('Abort')
            .on('click', function () {
                $this.remove();
                data.abort();
            });
        data.submit().always(function () {
            $this.remove();
        }).success(function (result, textStatus, jqXHR) { console.log("Result: " + result + " - TextStatus " + textStatus); })
        .error(function (jqXHR, textStatus, errorThrown) { console.log("Error: " + errorThrown + " - TextStatus " + textStatus); })
        .complete(function (result, textStatus, jqXHR) { console.log("Result: " + result + " - TextStatus " + textStatus); });
    }));

    $(upload_file).fileupload({
        dataType: 'json',
        autoUpload: false,
        acceptFileTypes: /(\.|\/)(pdf|jpe?g|png|doc|docx)$/i,
        maxFileSize: 5000000, // 5 MB
    }).on('fileuploadadd', function (e, data) {
        var uniqueId = $.guid++;
        data.context = $('<div id="div_upload_dcon_' + uniqueId +'" class="row"/>').appendTo(upload_filescon);
        $.each(data.files, function (index, file) {
            file.uniqueId = uniqueId;
            var node = $('<div id="div_fname" class="small-6 medium-4 large-4 columns"/>')
                    .append($('<span/>').text(file.name));
            if (!index) {
                data.url = baseUrl + 'PostUploadFile?fileName=' + data.files[index].name + '&refId=' + ClientRefId + '&upbyid=' + ClientUserId + '&ticketId=' + globalTicketId;
                var contentNode = (uploadCon.clone(true).data(data));
            }
            node.appendTo(data.context);
            $(contentNode).appendTo(data.context);
            $(upload_file).on('change', function () {
                alert('changing fileinput');
            });
        });
    }).on('fileuploadstart', function (e, data) {
        initProgressBars();
    }).on('fileuploadchange', function (e, data) {
        alert('changing');
    }).on('fileuploadprocessalways', function (e, data) {
        var index = data.index,
            file = data.files[index],
            node = $(data.context.children()[index]);
        if (file.error) {
            console.log(file.error));
        }
        if (index + 1 === data.files.length) {
            $('.uploadbtn').val('Upload').prop('disabled', !!data.files.error);
        }
    }).on('fileuploadprogress', function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#div_upload_dcon_' + data.files[0].uniqueId).progressbar('value', progress);
    }).on('fileuploadprogressall', function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $(upload_progressbar).progressbar('value', progress);
    }).on('fileuploaddone', function (e, data) {
        getTicketContent(globalTicketId);
    }).on('fileuploadstop', function (e, data) {
        $(upload_file).val('');
    }).on('fileuploadfail', function (e, data) {
        $.each(data.files, function (index, file) {
            var error = $('<span class="text-danger"/>').text('File upload failed.');
            $(data.context.children()[index])
                .append('<br>')
                .append(error);
        });
    });
}

Answer 1

Well, after a night's sleep and more thinking about it, I specified this option

replaceFileInput: false,

during the file upload initialisation. And guess what, it works as intended now. I'm guessing that the file input was being lost because the fileupload clones the control by default after an upload or change.

Thanks for any consideration anyone may have given this, I hope it comes in handy for someone else in the future.