Question

I am planning on using, either the Uploadify or Plupload, image upload libraries in my project. The reason I would like to use one of these libraries is to allow the user to be able to select multiple files at once and then upload them all at once as well.

My goal is to place one of these file upload controls on a form that also allows the user to enter other data into it in addition to selecting a bunch of images. The user should then be able to submit the form and have the data they entered and the images they selected, be uploaded and processed on the server.

The problem I am running into is that these file upload controls require the user to upload the selected files to the server before the actual aspx page gets submitted. In the end this creates confusion for the user. They first have to submit the images and then submit the form with the rest of the data.

My question is, is there a way to make Uplodify or Plupload send the selected files up to the server only when the user actually clicks the form’s submit button? I don’t want the user to first upload the files to a temp folder on the server and then submit the form separately.

This will require me to have to locate those uploaded files in the temp folder and associate them with the data submitted on the form at a later time.

The basic Asp.Net FileUpload control gives me part of what I am looking to do, by allowing me to submit the files at the same time as the rest of the form data, but it obviously does not allow the user to select multiple files at once.

Answer 1

Plupload is very flexible, in fact what people understand under Plupload when they mention it is usually just a UI or jQuery widget. But it’s not that – Plupload is pure JavaScript API, that one can use to build hist own customized implementation. What you say – upload files when submit button is clicked is also possible. Actually an example that comes with the Plupload bundle, shows just that (see: examples/jquery/jquery_ui_widget.html):

// Client side form validation
$('form').submit(function(e) {
    var uploader = $('#uploader').plupload('getUploader');

    // Files in queue upload them first
    if (uploader.files.length > 0) {
        // When all files are uploaded submit form
        uploader.bind('StateChanged', function() {
            if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
                $('form')[0].submit();
            }
        });

        uploader.start();
    } else
        alert('You must at least upload one file.');

    return false;
});