jQuery-File-Upload used for UI only?

Question

I would like to upload multiple files. The use case is: users on my website can upload multiple photographs.

Right now I am just using

<input type="file" name="myfiles" multiple="multiple">

This works well, but I want more. I'd like a nice interface showing the user what is uploaded AND for it to be more clear about which files are being uploaded.

https://github.com/blueimp/jQuery-File-Upload

So this blueimp jquery file upload script has beautiful UI and is just what I'm looking for. However there are a few issues:

1) I would like to submit the form to a php file which will DECIDE if the files get uploaded or not.

2) My form has many (many..) other fields. I would like this to submit via plain old post submit button along with the rest of my form. Is this possible?

If not, can someone recommend a better option?

Thanks!

Answer 1

All of the above is possible with the blueimp file upload plugin.

1) Decide if files get uploaded or not

Use the add: option in the plugin to make a separate ajax call to the server with the filenames added, and use the response to filter the list of files to be uploaded.

2) Add other data from the form to the upload

Use the formData: option in the plugin to add the other fields in a form to be passed to the server upon submit.

So something like the following:

$('#fileupload').fileupload({
        url: url,
        dataType: 'json',
        autoUpload: false,
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
        maxFileSize: 5000000, // 5 MB
        loadImageMaxFileSize: 15000000, // 15MB
        formData: $("#myForm").serializeArray()
    }).on('fileuploadadd', function (e, data) {
        data.context = $('<div/>').appendTo('#files');

        $.ajax(
               url: "/checkfiles",
               data: { files: data.files },
               success: function(result) {
                  // assume server passes back list of accepted files
                  $.each(result.files, function (index, file) {
                    var node = $('<p/>')
                       .append($('<span/>').text(file.name));
                    if (!index) {
                      node
                        .append('<br>')
                        .append(uploadButton.clone(true).data(data));
                    }
                    node.appendTo(data.context);
                  });
               }
    }).on('fileuploadprocessalways', function (e, data) {
        var index = data.index,
            file = data.files[index],
            node = $(data.context.children()[index]);
        if (file.preview) {
            node
                .prepend('<br>')
                .prepend(file.preview);
        }
        if (file.error) {
            node
                .append('<br>')
                .append(file.error);
        }
        if (index + 1 === data.files.length) {
            data.context.find('button')
                .text('Upload')
                .prop('disabled', !!data.files.error);
        }
    }).on('fileuploaddone', function (e, data) {
        $.each(data.result.files, function (index, file) {
            var link = $('<a>')
                .attr('target', '_blank')
                .prop('href', file.url);
            $(data.context.children()[index])
                .wrap(link);
        });
    }).on('fileuploadfail', function (e, data) {
        $.each(data.result.files, function (index, file) {
            var error = $('<span/>').text(file.error);
            $(data.context.children()[index])
                .append('<br>')
                .append(error);
        });
    });
});