Cannot post a particuliar data with jQuery Form Plugin ajaxForm

Question

I 'm trying to use these 2 jQuery plugins : plupload and jQuery Form Plugin ajaxForm.

It works fine except one thing : I can't send the file.name (with ajaxForm) of the file previously uploded with plupload.

I explain a little bit: the user sends a file with plupload. The file is uploded. It works fine.

Then, the user submits a form with ajaxForm and send form datas + the file name with post method.

I know how to send data with ajaxform, this code works fine :

var value1 = "dynamic_value1";
$('#my_form').ajaxForm({ 
        // datas is sent in post method, it works fine
        data: { value1: value1 }, 
        beforeSubmit: validate,
            success: function() { 
            // it's ok :
            //alert(value1);
        } 
    });

But i can't do this with pluplopad file.name, i can see the file name if i made an alert but i can't send it :

Plupload code to get the file name (it works) : var file_name_vous;

uploader.bind('FileUploaded', function(up, file, response) {

            // It's ok : i can get file name, alert show me the file name
            file_name_vous = encodeURIComponent(file.name);
            alert(file_name_vous);
        //};
    });
});

But i can't do this, this code doesn't work :

$participer_form.ajaxForm({ 
        type: 'POST',
        data: { 
        // impossible to send this var
        file_name_vous: file_name_vous
        }, 
        beforeSubmit: validate,

            // success 
            success: function() { 
                // It's ok, alert shows the file name 
                alert(file_name_vous);    
        } 
    });

So what i don't understand, i can send datas with post method, i've tested it. But I can't send this particular var : file_name_vous = encodeURIComponent(file.name);

do you know if there is something i should do with (file.name) before trying to send it by post method ?

I have no error, simply in firebug networks / XHR, i don't see anything about this var. If i replace this var by var value1 = "dynamic_value1", it works. so i guess, my issue is about this partuliar var file.name

Answer 1

Maybe you you should leave out the data part of your ajax form, and simply create an hidden field upon successful upload which will be submitted with your form.

Something like this :

uploader.bind('FileUploaded', function(up, file, response) {

            // It's ok : i can get file name, alert show me the file name
            file_name_vous = encodeURIComponent(file.name);
            // maybe you'll have to check if hidden filed already exists
            $participer_form.Append($('<input type="hidden" value="'+file_name_vous+'" id="file_name_vous" name="file_name_vous"/>'));
        //};

Hope this will help

BTW, have you tried this, to set the value as late as possible ?

uploader.bind('FileUploaded', function(up, file, response) {

            // It's ok : i can get file name, alert show me the file name
            file_name_vous = encodeURIComponent(file.name);
    $participer_form.ajaxForm({ 
            type: 'POST',
            data: { 
            // impossible to send this var
            file_name_vous: file_name_vous
            }, 
            beforeSubmit: validate,

                // success 
                success: function() { 
                    // It's ok, alert shows the file name 
                    alert(file_name_vous);    
            } 
        });
    });