Ajax Upload using valums ajax upload plugin inside a form

Question

i just came across this ajax upload plugin and i wish to use it inside a form as shown in the demo page example 3. For some reason i am not able to make it work. I am not sure what parameters come into the function. For example here is my sample code.

$(document).ready(function(){

        var upload = new AjaxUpload('property_i',
        {
        action: 'submitproperty.php',
        autoSubmit: false,
        onSubmit : function(file , extension){
        return false;
        }
        });

        var upload_data = upload.setData({
        'propertytype':'propertytype'
        });

       });

Now the ID used in the AjaxUpload function should be ID of the or of the Entire form. Also how do i use setData method. Any suggestions or links will be very helpful. Thanks

Solution 1

I got it to work with the following code:

new AjaxUpload('#uploader_button', {
    action: 'filename.ashx',
    autoSubmit: true,
    onSubmit: function(file, ext) {
        // --- stuff here

        // --- add postdata parameters
        this.setData({ id: 1, title: docTitle.val() }); 
    },
    onComplete: function(file, response) {
        // --- stuff here too
    }
});

it doesn't utilize the var but instead adds the custom data params in the onSubmit block. The only other difference is that I haven't wrapped the parameter key in quotes as it seems to serialize correctly. And I'm not using autoSubmit: false , but instead it's true...

Solution 2

The only way I could get this to work with autoSubmit: false is to add this outside any function:

var uploader;
var uploadFile;

then in the AjaxUpload(...

            onChange: function(file, response){
                    uploader = this;
                    uploadFile = file;
            },

then in the function to do the upload:

  uploader.setData({session: session});
  uploader.submit();

Hope this helps

Comments

[codingbbq]

Hi thanks for your reply. But i would prefer to use this plugin itself. I have searched almost all the forums, but could not find a solution. However the demo page of ajaxupload says that we can use it inside a form. Just need to know how to work around with it..Thanks

[s3yfullah]

Did you send mail to project owners ?