jQuery Ajax file upload formData

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!

Answer 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])

;)