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 !
Modérateur
Et l'eau Romane,

Ce soir j'ai pas trop le temps et la fatigue me joue des tours. Ce principe là est un peu long à t'expliquer. Bref, en parcourant cet article, je pense que tu devrais arriver à tes fins.

Aussi, sache que tu peux utiliser autre chose que xmlHttpRequest. Tu as fetch qui une api beaucoup plus élaborée que xmlHttpRequest.

Ce WE, je ferai attention à ton post si tu galères.
merci niuxe,
avant je voir votre réponse j'ai essayé quelque chose qui, je pense est sur la bonne viox mais ne marche pas très bien...

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>

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