Discussion :

[blobfish75]

Bonjour à tous, j'ai une question qui va certainement vous sembler très bête mais je début alors ne m'en voulez pas svp

Alors voilà, j'ai un template.html.twig, dans ce template j'ai une balise <form action="POST" href='monController'> qui créer une fiche de non conformité lorsqu'on le submit. Cela fonctionnait très bien.
Jusqu'à ce que je rajoute deux balises sur des endroits différents de ma page pour inserer un drag and drop comme voici:

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
<form method="POST" action="{{path('routePourCréerUneFiche')}}">
 
//si j'ai bien compris ce que j'ai lu sur internet, ce form est soumis des qu'une photo est mise //dans le drag and drop donc pas besoin de bouton submit ou de method="POST"
    <form action="{{path('recupererPhoto')}}" class="dropzone dz-clickable">
                    <div class="dz-default dz-message" aria-placeholder="">
                        <span>Drop files here to upload</span>
                    </div>
                </form>
                <input type="file" multiple="multiple" class="dz-hidden-input" style="visibility: hidden; position: absolute; top: 0; left: 0; height: 0; width: 0;">
 
//le bouton qui submi mon form pour créer la fiche et qui ne marche plus depuis que 
//j'ai mi le form pour les photos
 <button type="submit" id="valider" class="btn btn-success">Valider</button>
 
</form>

Cependant depuis que je les ai ajoutés, impossible de subit mon formulaire depuis cet ajout. Cela reste sur la même page comme si je ne cliquais pas sur le bouton.
Comment faire pour y remédier ? merci.

[blobfish75]

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 !

EDIT

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

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
 
 
<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

Code :

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

1
2
 
<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 !

[NoSmoking]

Nota modération : discussions regroupées.

Les liens que tu as fournis semble suffisant pour mettre en oeuvre ce que tu cherches à faire et la documentation de DropzoneJS est claire.

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....

Je ne saisie pas le besoin !

[blobfish75]

C'est bon c'est reglé, merci beaucoup !

[NoSmoking]

Bonjour,
un élément <form> dans un élément <form> n'est pas autorisé et la parser du navigateur va faire le ménage et le contenu ne correspondra sûrement pas à ce que tu crois, voir avec la console F12 !

Code :

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

1
2
//si j'ai bien compris ce que j'ai lu sur internet, ce form est soumis des qu'une photo est mise
//dans le drag and drop donc pas besoin de bouton submit ou de method="POST"

tu as trouvé cela où, il te faut au moins gérer un événement drop !?!

[blobfish75]

Bonjour,
un élément <form> dans un élément <form> n'est pas autorisé et la parser du navigateur va faire le ménage et le contenu ne correspondra sûrement pas à ce que tu crois

j'ai bien essayé de mettre "les deux form ensemble" mais je n'ai pas réussi ... je ne vois pas du tout comment faire pour ajouter une dropzone à l'interieur de mon form sans que cela n'empeche mon form de fonctionner... et je ne sais pas non plus comment récupérer les images mis dans la dropzone si je réussissais à la faire fonctionner correctement

voici plusieurs liens de sites que j'ai visités pour essayer de comprendre sans succès
https://www.startutorial.com/article...zonejs-and-php
https://stackoverflow.com/questions/...BD9ajkgfcgmBFs