Créer une dropzone dans un form HTML

Romane Pm
Les bases HTML/CSS

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 


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

Aucune réponse