JQuery sending Post Request with attached file

Question

I got form file input (only 1 file) so to submit it I've tried this :

$("#addBrand").validate({
        rules: {
            brandName: "required",
            brandLogo: "required"

        },
        messages: {
            brandName: "Please enter the brand name",
            brandLogo: "Please add brand Logo"

        },
        errorElement: 'p',
        errorClass: 'help-block',
        errorPlacement: function(error, element) {
            if(element.parent('.form-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        },
        highlight: function(element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function(element) {
            $(element).closest('.form-group').removeClass('has-error');
        },

        submitHandler: function(form, event) {
                run_waitMe();
                var $form = $(form);
                event.preventDefault(); //keeps the form from behaving like a normal (non-ajax) html form
                var url = $form.attr('action');
                var data = new formData();
                data.append ('brandName', $('#brandName').val());
                data.append('brandLogo', $('#brandLogo')[0].files[0] );
                $.post(url, data, function(response) {
                    //handle successful validation
                    $('.wrapper').waitMe('hide');
                    if (response["fail"] == true) {
                        var errors = response['errors'];
                        for (var key in errors) {
                            if (errors.hasOwnProperty(key)) {
                                var field = errors[key];
                                for ( var i = 0; i < field.length; i++) {
                                    var $input = $form.find('#' + key );
                                    ($input.parent().find("p")).remove();
                                    $input.parent().parent().removeClass( "has-error" );
                                    $input.parent().parent().addClass( "has-error" );
                                    $input.after('<p id="'+ key + '-error" class="help-block">'+ field[i]+'</p>');

                                }
                            }
                        }

                    } else {
                        $('.wrapper').waitMe('hide');
                        $('#addBrand').modal('hide');
                        $(".combobox").prepend("<option value='"+response['objectId']+"' selected='selected'>"+ response['objectName']+"</option>");
                        console.log("<option value='"+response['objectId']+"' selected='selected'>"+ response['objectName']+"</option>");
                    }
                }).fail(function(response) {
                    //handle failed validation
                    $('.wrapper').waitMe('hide');
                    console.log("Failed");

                });
        }
    });

With this code I get this error :

formData is not defined : var data = new formData();

Also I tried something like this :

submitHandler: function(form) {
            $('#addBrand').unbind('submit').bind('submit', function(e){
                run_waitMe();
                var $form = $(this);
                e.preventDefault(); //keeps the form from behaving like a normal (non-ajax) html form
                var url = $form.attr('action');
                var data = new FormData();
                data.append ('brandName', $('#brandName').val());
                data.append('brandLogo', $('#brandLogo')[0].files[0] );

                $.post(url, data, function(response) {
                    //handle successful validation
                    $('.wrapper').waitMe('hide');
                    if (response["fail"] == true) {
                        var errors = response['errors'];
                        for (var key in errors) {
                            if (errors.hasOwnProperty(key)) {
                                var field = errors[key];
                                for ( var i = 0; i < field.length; i++) {
                                    var $input = $form.find('#' + key );
                                    ($input.parent().find("p")).remove();
                                    $input.parent().parent().removeClass( "has-error" );
                                    $input.parent().parent().addClass( "has-error" );
                                    $input.after('<p id="'+ key + '-error" class="help-block">'+ field[i]+'</p>');

                                }
                            }
                        }

                    } else {
                        $('.wrapper').waitMe('hide');
                        $('#addBrand').modal('hide');
                        $(".combobox").prepend("<option value='"+response['objectId']+"' selected='selected'>"+ response['objectName']+"</option>");
                        console.log("<option value='"+response['objectId']+"' selected='selected'>"+ response['objectName']+"</option>");
                    }
                }).fail(function(response) {
                    //handle failed validation
                    $('.wrapper').waitMe('hide');
                    console.log("Failed");

                });
            });
        }

but I get this error :

TypeError: 'append' called on an object that does not implement interface FormData.

Try this jquery plugin: http://malsup.com/jquery/form/ Worked very well for me. — Fabian Lurz, May 02 '15 at 10:50
@FabianLurz Thank's for sharing but I need to know , to learn how to do it :) `Dont give me fish, show me how to catch it` — Chlebta, May 02 '15 at 11:08
I would share you a solution that can upload images - is this helpful for you? — Fabian Lurz, May 02 '15 at 11:09
Sure, but as I told you I need to know what's wrong in my code and what i've missed — Chlebta, May 02 '15 at 11:11
Ok - first example it should say: var formData = new FormData(); Second example: Try this http://stackoverflow.com/questions/19722920/submitting-a-file-with-jquery-ajax-gives-typeerror — Fabian Lurz, May 02 '15 at 11:15
using `var formData`or `var data` is the same it just variable name , as I think I'm not very familiar with JS. For the **seconde** example I've tried that like this `form.proccessData = false`but not working same issue — Chlebta, May 02 '15 at 11:23
of course - it is only a variable. But the constructor after the variable is important. You have written var data=new formData(); but it should be var data = new FormData();. If you have tried all this and still not working i have no idea anymore - sry. If no one answers you anymore you should really try the plugin i recommended you. Makes things a lot easier. — Fabian Lurz, May 02 '15 at 11:26
@FabianLurz yeah I haven't payed attention for the **F** it should be upped case thank's but this didn't solved now I get the same error in second example : `'append' called on an object that does not implement interface FormData.` — Chlebta, May 02 '15 at 11:33

score 0 · Answer 1 · answered May 02 '15 at 13:15

0

use the following plugin as it allows all kind of data as native jquery request in your submitHandler place the ajaxSubmit() http://malsup.com/jquery/form/

answered May 02 '15 at 13:15

Sagar Rabadiya

4,126
1
21
27

JQuery sending Post Request with attached file

1 Answers1