jQuery Ajax file upload formData [duplicate]

Question

I was wondering why when I use serialize it works fine, but if I try to use formData instead it seems that my Ajax isn't going 'server side'?

My HTML :

<form method="post" class="bg-light p-3 h-100 audio" enctype="multipart/form-data">
                                <input type="hidden" name="tab" value="tab7">

                                <fieldset>
                                    <legend class="legend clearfix">Médias
                                        <button type="button" id="addAudio" class="btn btn-first rounded-0 d-block float-right" title="Ajouter un autre fichier">
                                            <i class="far fa-plus"></i>
                                        </button>
                                    </legend>

                                    
                                    <label for="video_file" class="col-form-label col-form-label-sm">Echantillon video <small class="text-muted">(5 Mo, mpeg/webm)</small></label>
                                    <input type="file" name="video_file" id="video_file" class="form-control-file form-control-sm mb-1 video" data-video-item="" accept="video/mpeg,video/webm">

here is the jQuery I use :

if($(this).data('changed') == 'yes'){
                var form = $(this).closest('form');
                var formdt = form.serialize();
                var id = <?=($id) ?? '';?>;
                var phpform = '<?=$form;?>';
                

                $.post('<?=$this->url('ajax_products_edit')?>', {'form': formdt, 'id': id, 'phpform': phpform}, function(json){
                    console.log(json);
                    if(json['result'] == 'success'){
                        alert(json.msg); // A VIRER DES QUE LE BUG DE LA SWAL QUI SE ZAP TOUTE SEUL SERA FIX
                        swal("Modifié", json.msg, "success");                       
                    }
                    else if(json.result == 'error') {
                        alert(json.msg); // A VIRER DES QUE LE BUG DE LA SWAL QUI SE ZAP TOUTE SEUL SERA FIX
                        swal( "Oops", json.msg , "error");
                    } 
                    else {
                        alert(json.msg); // A VIRER DES QUE LE BUG DE LA SWAL QUI SE ZAP TOUTE SEUL SERA FIX
                        swal( "Oops", 'Erreur lors de la modification' , "error");
                    }
                })
            }

As i said, if I replace var formdt = form.serialize(); by var formdt = new formData(form) nothing happen, I never used formData before, maybe I miss a setting or something.

Can someone please light me up on this?

Thanks for your time!

Does this answer your question? Pass entire form as data in jQuery Ajax function. More specifically Moh Arjmandi answer. — Daniel Manta
– Daniel Manta, Commented Jan 7, 2021 at 22:59
If i understood his answer ( Moh Arjmandi's ) correctly, my issue come from the use of .post methode instead of .ajax that have more specific setting ? Because when I read other comments it seem that they're having the opposite issue, formData work for them but serialize don't. — Shogu23
– Shogu23, Commented Jan 7, 2021 at 23:47

Louys Patrice Bessette · Accepted Answer · 2021-01-10 04:50:23Z

1

...if I replace var formdt = form.serialize(); by var formdt = new formData(form) nothing happen...

Yes something happens! You didn't notice because you didn't check the console !

TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.

That is... Because you passed a jQuery object.
Remember that line? var form = $(this).closest('form');

Now, this will work fine:

var formdt = new formData(form[0])

;)

answered Jan 10, 2021 at 4:50

Louys Patrice Bessette

34k7 gold badges41 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery Ajax file upload formData [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related