Créer une dropzone dans un form HTML

Fermé

romane_pm Messages postés 4 Date d'inscription jeudi 23 janvier 2020 Statut Membre Dernière intervention 24 janvier 2020 - 23 janv. 2020 à 18:22
jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 - 24 janv. 2020 à 18:39

Bonjour à tous,
Je suis nouvelle à la programmation et je rencontre un problème.
Alors voilà, je code un site internet avec php, HTML et CSS.
J'ai un template dans lequel il y a une <form methode="POST" action=ma route><form/> qui, lorsque l'on clique sur le bouton submit créer une fiche qui s'enregistre dans une API.

J'aimerai rajouter dans ce formulaire une dropzone qui permettent de récuperer des photos dans la fonction php pour les enregistrer elles aussi dans l'API. Cependant j'ai fais des recherches sur internet mais je ne trouve jamais d'exemple avec une dropzon dans un form déjà fait ... j'ai essayé quelques trucs mais ça faisait que l'envoie du mon formulaire de base ne marchait plus.

Quelqu'un pourrait-il m'aider à créer une dropzone qui fonction dans un form puis à récuperer les photos de cette dropzone lors du clique sur le bouton submit pour pouvoir les enregistrer dans une API ?
Merci pour vos réponses !

A voir également:

Html drop zone
Zone telechargement - Accueil - Outils
Air drop - Guide
Share drop - Télécharger - Téléchargement & Transfert
Editeur html - Télécharger - HTML
Appel data zone franche ✓ - Forum Vos droits sur internet

5 réponses

Réponse 1 / 5

jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
23 janv. 2020 à 20:50

https://www.dropzonejs.com/

Réponse 2 / 5

romane_pm Messages postés 4 Date d'inscription jeudi 23 janvier 2020 Statut Membre Dernière intervention 24 janvier 2020
23 janv. 2020 à 20:52

Bonsoir,
J'ai vu ce lien et j'ai pu faire une dropzone, cependant la dropzone est faite avec un form, j'aimerai que la mienne soit inclue dans un form. J'ai essayé de mixé ça avec mon form mais cela m'a mis une dropzone sur toute la page, ce qui n'est pas vraiment le résultat souhaité je dois avouer... '^^

Réponse 3 / 5

romane_pm Messages postés 4 Date d'inscription jeudi 23 janvier 2020 Statut Membre Dernière intervention 24 janvier 2020
24 janv. 2020 à 11:57

EDIT
pour l'instant j'ai essayé de faire ça

```

<script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>
<link rel="stylesheet" href="{{asset('dropZone.css')}}">
<form action="{{path('ficheNC')}}" enctype="multipart/form-data" method="POST">
<input type="text" id ="firstname" name ="firstname" />
<input type="text" id ="lastname" name ="lastname" />
<div class="dropzone dz-clickable" >
<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>
<button type="submit" id="submit-all"> upload </button>
</form>

<script src="dropzone.js">
Dropzone.options.myDropzone= {
url: {{path('ficheNC')}},
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 5,
maxFiles: 1,
maxFilesize: 1,
acceptedFiles: 'image/*',
addRemoveLinks: true,
init: function() {
dzClosure = this; // Makes sure that 'this' is understood inside the functions below.

// for Dropzone to process the queue (instead of default form behavior):
document.getElementById("submit-all").addEventListener("click", function(e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
dzClosure.processQueue();
});

//send all the form data along with the files:
this.on("sendingmultiple", function(data, xhr, formData) {
// formData.append("firstname", jQuery("#firstname").val());
// formData.append("lastname", jQuery("#lastname").val());
});
}
}
</script>
```

cependant cela ne fonctionne pas: la partie dropzone ne permet pas de mettre des photos dedans... J'ai aussi essayé en mettant

```
<form action="{{path('ficheNC')}}" enctype="multipart/form-data" method="POST" class="dropzone dz-clickable" > et là la dropzone permet de
```

mettre des photos dedans mais celle ci fait la taille du form ce qui n'est pas ce que je veux....
Voila voila si quelqu'un peut m'aider.... Merci beacoup !

Réponse 4 / 5

jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
Modifié le 24 janv. 2020 à 14:16

Déjà.. merci de poster ton code en utilisant les BALISES DE CODE.
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

Ensuite, normal que ça ne marche pas.

Tu as oublié un </script> et un <script>

<script src="dropzone.js"></script>
<script> 
  Dropzone.options.myDropzone= {
    url: {{pa

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 5

romane_pm Messages postés 4 Date d'inscription jeudi 23 janvier 2020 Statut Membre Dernière intervention 24 janvier 2020
24 janv. 2020 à 14:23

Bonjour,
merci pour les balises, je n'avais pas vu où les trouver :)
Ensuite, je ne comprends pas votre réponse... je ne vois pas où j'ai oublié de balises script.
J'ai bien ma premiere

<script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>

et ma deuxième qui est fermée où se trouve le code js...

jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
24 janv. 2020 à 18:39

Toi tu as ça

<script src="dropzone.js">
Dropzone.options.myDropzone= {
url: {{path

Ce n'est pas vraiment la même chose que ce que je t'ai montré...

idem pour l'utilisation des balises de code il semble que tu n'aies pas lu complètement le lien...vu que tu as oublié d'y indiquer le langage ce qui ne permet pas d'avoir la coloration syntaxique...

Discussions similaires

Vidéo : comment changer sa zone géographique ?

détail facture sfr data ?

la balise <br> ou <br />

Erreur la zone de données passée à un appel système est insu