Question

When using Valums Ajax file uploader, how can I trigger the upload?

The default behavior is for the upload to begin immediately after the user selects a file. I want to prevent this from happening, and instead trigger the upload when the user clicks a separate “Upload” button after they have selected a file.

I looked through the code and found that the upload begins on the change event attached to the file input. I began by adding return false; to to the onSubmit function, and then attaching a click event to another button that triggered the change event:

$('#startUpload').on('click', function() {  
    // some conditionals
    $('input[name="file"]').trigger('change');  
});

That doesn’t work. It just opens the file menu again.

How can I prevent the upload from occurring immediately after the user selects the file and instead trigger it when the user clicks another button?

Answer 1

You will have to modify the file-uploader.js file for this. In line 309, modify the onChange function to return false. Then add the following function above it, so that the code becomes:

startUpload: function(){
    this._onInputChange(this._button.getInput());
},
_createUploadButton: function(element){
    var self = this;

    return new qq.UploadButton({
        element: element,
        multiple: this._options.multiple && qq.UploadHandlerXhr.isSupported(),
        onChange: function(input){
            return false;
        }
    });
},

Then in your HTML file, within your button click or any other event, call

uploader.startUpload();

where uploader is the name of your qq.FileUploader() object.

Hope that helps 🙂