Ajax Upload using valums ajax upload plugin inside a form.

Question

Hi , 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

Answer 1

I'm using uploadify and very useful. http://www.uploadify.com/

Answer 2

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...

Answer 3

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