CODEWITHSUNDEEP
jqueryfile-upload
imdadhusen
imdadhusen

Reputation: 2494

How to set params dynamically for AjaxUpload?

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.

Upvotes: 3

Views: 8139

Answers (4)

wengeezhang
wengeezhang

Reputation: 3101

first,you can set a global object:

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

then,you can change property's value through AjaxUploadObj._settings

for example: AjaxUploadObj._setting.action="http://mustrank.com/dosomething.php"

Upvotes: 1

lubosdz
lubosdz

Reputation: 4530

According to documentation, following should work for you:

onSubmit : function(id, fileName){
    var delete=$("#check-delete-previous").is(":checked");
    this.setParams({ "deletePrevious" : delete });
},

Make sure you are using latest version, because older versions may not set callback functions correctly.

Edit: In fact, following worked only for me:

onSubmit : function(id, fileName){
    var delete=$("#check-delete-previous").is(":checked");
    this.params.deletePrevious = delete;
},

Upvotes: 0

Spycho
Spycho

Reputation: 7788

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.

Upvotes: 8

jerjer
jerjer

Reputation: 8766

try: 

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

Or

$('#addImage').bind('mousedown',function(){
    //code here
});

Upvotes: 0

Related Questions