jQuery Fileupload Blueimp on AJAX input

Question

After fighting this plugin for hours, I still cannot get it to work. It is one problem after another, and I have no idea what I'm doing wrong if anything!

I am working on ASP.NET MVC application, and have a partial view that contains the file input. On initial page load, the input does not exist in the DOM, it only comes through via an AJAX call when I press a button.

So here is my code and a related thread of mine about this issue.

$(function () {
    $('#campaign-form-wrap').on('change', '#fileUpload', function () {
        $(this).fileupload({
            dataType: 'json',
            url: '/JWIntranet/Campaign/ConvertExcelToVehicleDriverSummariesJson',
            done: function (e, data) {
                $.each(data.result.files, function (index, file) {
                    $('<p/>').text(file.name).appendTo(document.body);
                });
            }
        });
    });
});

This code does not throw any errors, so I guess all is good! (read linked thread for details).

However, the plugin is NOT working in the sense that the break-point on my MVC controller is not being hit.

Anyone any ideas on this? it is driving me mad :(

Answer 1

Your event delegation seems strange. Maybe it's because I haven't your view code, but you can just try it :

$(function () {
    $('#campaign-form-wrap').on('fileuploadadd', function () {
        dataType: 'json',
        url: ... ,
        done: function (e, data) {
            ...
        },