Question

I have created a function to upload a file using this library as follows:

new AjaxUpload($('#addImage'), {
                action: 'SaveDataBank.aspx',
                name: 'uploadimage',
                dataType: 'json',
                params: { clientid: GetSelectedClient() }
                onSubmit: function (file, ext) {
                },
                onComplete: function (file, response) {
                }
            });

I would like to perform some task before opening a file dialog. How could I update the above code?

UPDATE:

I would like to pass a parameter dynamically with the file upload. I have a dropdown containing a list of client ids. If I click on the Upload button it will open File Dialog. I would then like it to pass in the selected client from the dropdown. Currently, it only passes the initially selected value.

params: { clientid: GetSelectedClient() },

The above line does not work as per my requirement.

Answer 1

First idea (which doesn’t work)

Try binding a click handler to the button. If you don’t return false or stop propagation, it will trigger the file uploader after the click handler finishes:

$('#addImage').click(function(){
    // code here
});

new AjaxUpload($('#addImage'), {
                action: 'SaveDataBank.aspx',
                name: 'uploadimage',
                dataType: 'json'
            });

This doesn’t work because the AjaxUpload library creates an input element which it puts over the top of the button when you hover over the button. It’s actually the input element that you click.

Work around

Bind to the click event of the input that you actually click on. This does not exist on page load, so we have to use the jQuery live function:

new AjaxUpload($('#addImage'), {
                action: 'SaveDataBank.aspx',
                name: 'uploadimage',
                dataType: 'json'
            });

$('input[type="file"]').live('click', function(e){
    // code here
});

See my updated fiddle for a working example.

Passing dynamic data

To pass dynamic data along with your file upload, add a setData call in the onSubmit handler:

new AjaxUpload($('#addImage'), {
            action: 'SaveDataBank.aspx',
            name: 'uploadimage',
            dataType: 'json',
            onSubmit: function (file, ext) {
                this.setData({clientid: GetSelectedClient()});
            }
        });

Conclusions

This shows that the library is a bit awkward to work with. You don’t click the button, so you won’t get normal button effects (i.e. it becoming indented when mouse down). Any JavaScript which relies on the button events will not work as expected. You can go with the above solution, but personally, I would look for a different library. Maybe the newer one that replaces this? Here are a bunch of others and some more.