method append() et requête Ajax

Bonjour à tous,

Mon contexte : un formulaire avec un <input type:file multiple>. Je souhaite que l'internaute puisse faire la suppression d'un des fichiers qu'il a chargé avec le input en question.

Code:

<input type="file" name="image[]" class="required form-control-file hide_input" id="image_1" multiple="multiple">

Mon javascript

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var arrImg = new FormData();
for (var i = 0; i < nbFiles; i++) {
  var actualName = $(fromInput)[0].files[i].name; // ici je récupère les photos toutes photos
  if(actualName != valueToDelete){ // si la photo est celle que je ne veux plus garder alors je ne la mets dans mon tableau
    imgValue = document.getElementById('image_1').files[i];
    arrImg.append("image[]", imgValue); // Je crée un nouveau tableau avec uniquement les valeurs que je souhaite
  }
}
arrImg.append('action','delete_tof'); // Comme c'est un worpdress je rajoute la fonction que je vais appeler
arrImg.entries();
my_url = ajaxurl;
$.ajax({ // Je lance mon AJAX
  url:my_url,
  data :arrImg,
  contentType: false,
  processData: false,
  method: 'POST',
  success : function(data){ 
    console.log(data); // no problème ci-après une photo de la valeur de mon console.log de retour
 
  },
  error : function( data ) {
      alert('Une erreur s\'produite, au moment d\'effacer votre image');
      // location.reload();
  }
})

Ci après une copie d'écran avec uniquement les fichiers qui m'intéressent (résultat du console log ci-dessus)

Pièce jointe 548874

En suite la fonction php que j'appelle en AJAX

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
function delete_tof(){
    // Count total files
    $countfiles = count($_FILES['image']['name']);
    // echo '<pre>';
    // print_r($_FILES);
    // echo '</pre>';
    // Upload directory
    $upload_location = '/tmp/';
 
    // To store uploaded files path
    $files_arr = array();
 
    // Loop all files
    for($index = 0;$index < $countfiles;$index++){
 
       // File name
       $filename = $_FILES['image']['name'][$index];
 
       // Get extension
       $ext = pathinfo($filename, PATHINFO_EXTENSION);
 
       // Valid image extension
       $valid_ext = array("png","jpeg","jpg");
 
       // Check extension
       if(in_array($ext, $valid_ext)){
 
         // File path
         $path = $upload_location.$filename;
 
         // Upload file
         if(move_uploaded_file($_FILES['image']['tmp_name'][$index],$path)){
            $files_arr[] = $path;
         }
       }
 
    }
    echo json_encode($files_arr);
    wp_die();
}

et ci-après la copie d'écran du vardump($_FILES) qui est lui aussi comme je le souhaite

Pièce jointe 548876

J'ai fais le même test avec FormData.set() mais RAS

https://developer.mozilla.org/fr/doc...ormData/append

Hors je ne comprends pas quand tout ça c'est fait et que je valide mon formulaire, j'ai toujours le même nombre d'image uploader au départ ?

Quelqu'un pourrait-il m'indiquer ce que je fais mal ou ce que je n'ai pas compris ?