Discussion :

[blobfish75]

Bonjour à tous,

J'ai un soucis depuis quelque jours et je n'arrive pas à le résoudre !

Alors voila j'ai un formulaire composé de plusieurs formulaires. Un formulaire "en plusieurs fois" qui me permet de créer une fiche et dans la fonction php de l'enregistrer sur une API et deux formulaires qui sont des dropzone qui me permettent de mettre des photos, ces photos devant être également enregistrées sur l'API.

cela se présente sous cette forme là pour le code html:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<DIV id="dropzone">
    <form id="form2" action=routeQuiRenvoieALaFonctionPourCréerFiche methode="Post">
//une partie de mon formulaire qui permet d'entrer les infos de la fiche
    </form>
    <form id="form1" action=routeQuiRenvoieALaFonctionPourCréerFiche enctype="multipart/form-data" method="POST" class="dropzone dz-clickable">
    <div  >
        <div class="dz-default dz-message" aria-placeholder="">
            <span>Drop files here to upload</span>
            <input type="file" multiple="multiple" class="dz-hidden-input" style="visibility: hidden; position: absolute; top: 0; left: 0; height: 0; width: 0;">
 
        </div>
    </div>
</form>
   <form id="form2" action=routeQuiRenvoieALaFonctionPourCréerFiche methode="Post">
//une partie de mon formulaire qui permet d'entrer les infos de la fiche
    </form>
  <form id="form1" action=routeQuiRenvoieALaFonctionPourCréerFiche enctype="multipart/form-data" method="POST" class="dropzone dz-clickable">
    <div  >
        <div class="dz-default dz-message" aria-placeholder="">
            <span>Drop files here to upload</span>
            <input type="file" multiple="multiple" class="dz-hidden-input" style="visibility: hidden; position: absolute; top: 0; left: 0; height: 0; width: 0;">
 
        </div>
    </div>
</form>
  </DIV>

Pour envoyer les infos et créer la fnc j'ai un peu de js qui me permet d'envoyer toutes les parties de form2 vers la fonction et ainsi créer ma fiche.

le js pour la dropzone est ainsi:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
var dropzone = new Dropzone('#demo-upload', {
  previewTemplate: document.querySelector('#preview-template').innerHTML,
  parallelUploads: 2,
  thumbnailHeight: 120,
  thumbnailWidth: 120,
  maxFilesize: 3,
  filesizeBase: 1000,
  thumbnail: function(file, dataUrl) {
    if (file.previewElement) {
      file.previewElement.classList.remove("dz-file-preview");
      var images = file.previewElement.querySelectorAll("[data-dz-thumbnail]");
      for (var i = 0; i < images.length; i++) {
        var thumbnailElement = images[i];
        thumbnailElement.alt = file.name;
        thumbnailElement.src = dataUrl;
      }
      setTimeout(function() { file.previewElement.classList.add("dz-image-preview"); }, 1);
    }
  }
 
});
 
 
// Now fake the file upload, since GitHub does not handle file uploads
// and returns a 404
 
var minSteps = 6,
    maxSteps = 60,
    timeBetweenSteps = 100,
    bytesPerStep = 100000;
 
dropzone.uploadFiles = function(files) {
  var self = this;
 
  for (var i = 0; i < files.length; i++) {
 
    var file = files[i];
    totalSteps = Math.round(Math.min(maxSteps, Math.max(minSteps, file.size / bytesPerStep)));
 
    for (var step = 0; step < totalSteps; step++) {
      var duration = timeBetweenSteps * (step + 1);
      setTimeout(function(file, totalSteps, step) {
        return function() {
          file.upload = {
            progress: 100 * (step + 1) / totalSteps,
            total: file.size,
            bytesSent: (step + 1) * file.size / totalSteps
          };
 
          self.emit('uploadprogress', file, file.upload.progress, file.upload.bytesSent);
          if (file.upload.progress == 100) {
            file.status = Dropzone.SUCCESS;
            self.emit("success", file, 'success', null);
            self.emit("complete", file);
            self.processQueue();
            //document.getElementsByClassName("dz-success-mark").style.opacity = "1";
          }
        };
      }(file, totalSteps, step), duration);
    }
  }
}

C'est quelque chose que j'ai trouvé qui a l'air de correspondre à ce que je veux mais ne connaissant pas js je ne comprends pas tout...

Voilà mes questions : Comment faire pour récupérer les photos de mes dropzones dans ma fonction php et ainsi pouvoir les enregistrer sur mon API (une fois que j'ai les photos je sais les enregistrer sur mon API dans ma fonction php) ? Et comment je peux faire pour différencier les photos de je récupererais de la première dropzone et de la deuxième ?

Merci beaucoup !

[domi65]

Bonjour ton input file n'a pas de nom : ton formulaire n'envoie rien.
D'autre part, pour envoyer des fichiers en post, il faut que la balise form contienne l'attribut : enctype="multipart/form-data"
Cordialement.
A moins que ton javascript modifie le dom, mais on n'en sait rien.
As-tu fait un var_dump($_FILES) pour savoir ce que reçoit la page de traitement ?
Si elle reçoit bien quelque chose, dis-nous quoi pour qu'on puisse t'aider à traiter ce qui devrait être un tableau de fichiers.

[edit] je viens de m'intéresser à la bibliothe dropzonejs que tu utilises. Sur le site de l'éditeur est expliqué comment récupérer les fichiers en PHP à cette page :
https://www.startutorial.com/article...zonejs-and-php

[blobfish75]

finalement je n'ai pas fait de dropzone, juste un bouton pour choisir une photo dans ses fichiers, merci !