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?

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?

• javascript
• jquery
• html
• ajax

2 Answers 2

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 bees:

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 :)

Valums Ajax file uploader now supports this feature.. You can Queue Files and Trigger Upload on Button Click

 var uploader2 = new qq.FileUploader({
    element: $('#manualUploadModeExample')[0],
    action: "success.html",
    autoUpload: false,
    demoMode: true,
    uploadButtonText: "Select Files"
});

$('#triggerUpload').click(function() {
    uploader2.uploadStoredFiles();
});

For more on this, check out this link : valums file uploder