Drap&drop et ajax

Bonjour à tous, je suis nouveau sur ce forum,

Je tente de mettre au point une zone de drap&drop et d'envoyer mon fichier pour traitement mais sans succès.

J'ai suivi ceci : https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API et c'est apparemment fonctionnel mais je n'arrive pas à envoyer (ou recevoir) le fichier droppé pour traitement dans le fichier upload.php.

Mon code html :

<td class="centre drop_zone drop_file_acompte" ondrop="dropHandler(event);"  ondragover="dragOverHandler(event);" data-id-acompte="<?php echo $vali;?>">
</td>

et mon code JS

<script>
function dropHandler(ev) {
  console.log('Fichier dans la zone en ce moment...');

  // Evitar el comportamiendo por defecto (Evitar que el fichero se abra/ejecute)
  ev.preventDefault();

  if (ev.dataTransfer.items) {
    // Usar la interfaz DataTransferItemList para acceder a el/los archivos)
    for (var i = 0; i < ev.dataTransfer.items.length; i++) {
      // Si los elementos arrastrados no son ficheros, rechazarlos
      if (ev.dataTransfer.items[i].kind === 'file') {
        var id_acompte=$(this).data('id-acompte');
        var file = ev.dataTransfer.items[i].getAsFile();
        
        new FormData(id_acompte,file);
        
        $.ajax({
        url: "upload.php",
        type: "POST",
        data: FormData,
        contentType:false,
        cache: false,
        processData: false,
        success: function(data){
            $('#forms_in_window').append(data);
    }});
        
        console.log('... fichier[' + i + '].nommé = ' + file.name);
      }
    }
  } else {
    // Usar la interfaz DataTransfer para acceder a el/los archivos
    for (var i = 0; i < ev.dataTransfer.files.length; i++) {
      console.log('... fichier[' + i + '].nommé = ' + ev.dataTransfer.files[i].name);
    }
  }

  // Pasar el evento a removeDragData para limpiar
  removeDragData(ev);
}

function dragOverHandler(ev) {
  console.log('Fichier dans la zone X');

  // Prevent default behavior (Prevent file from being opened)
  ev.preventDefault();
}

function removeDragData(ev) {
  console.log('On fait un clean-up---');

  if (ev.dataTransfer.items) {
    // Use DataTransferItemList interface to remove the drag data
    ev.dataTransfer.items.clear();
  } else {
    // Use DataTransfer interface to remove the drag data
    ev.dataTransfer.clearData();
  }
}
</script>

Au moment du drop la console me montre ceci :

Fichier dans la zone X 33 line 2 > injectedScript:44:11
Fichier dans la zone en ce moment... line 2 > injectedScript:3:11
... fichier[0].nommé = Documentos escaneados(2).pdf line 2 > injectedScript:29:17
On fait un clean-up---

Donc apparemment pas d'erreur, le fichier est bien laissé et reconnu, mais comment faire pour envoyer le fichier. J'ai tenté une requête ajax comme j'en fait habituellement mais je ne reçoit rien de l'autre côté, et par conséquent je ne peux traiter.

J'ai cherché sur le web sur maints sites mais sans succès.

Une idée ou un tuto spécifique ? Merci par avance.
Modifié par hugopaqueto (12 Nov 2021 - 14:22)

Regarde https://css-tricks.com/drag-and-drop-file-uploading/
ce sera peut être plus clair