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 pulisuers 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 etre également enregitrées sur l'API.
cela se présente sous cette forme là pour le code html:
<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:
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 connaisant 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 !