Intégration de Dropzone.js dans un formulaire HTML existant avec d'autres champs

Question

J'ai actuellement un formulaire HTML dans lequel les utilisateurs remplissent les détails d'une annonce qu'ils souhaitent publier. Je souhaite maintenant pouvoir ajouter un zone de saut pour télécharger des images de l'objet à vendre.

J'ai trouvé Dropzone.js qui semble faire la plupart des choses dont j'ai besoin. Cependant, en consultant la documentation, il apparaît que vous devez spécifier la classe de l'ensemble du formulaire comme suit dropzone (par opposition au simple entrée élément). Cela signifie donc que l'ensemble de mon formulaire devient l'élément zone de saut .

Est-il possible d'utiliser la dropzone dans une partie seulement de mon formulaire, c'est-à-dire en ne faisant que en spécifiant l'élément comme classe "dropzone" plutôt que l'ensemble du formulaire ?

Je pourrais utiliser des formulaires séparés, mais je veux que l'utilisateur puisse tout soumettre avec un seul bouton.

Sinon, existe-t-il une autre bibliothèque qui peut faire cela ?

Merci beaucoup.

Answer 1

Le tutoriel d'Enyo est excellent.

J'ai trouvé que l'exemple de script dans le tutoriel fonctionnait bien pour un bouton intégré dans la dropzone (c'est-à-dire l'élément de formulaire). Si vous souhaitez avoir le bouton en dehors de l'élément de formulaire, j'ai pu le réaliser en utilisant un événement de clic :

D'abord, le HTML :

<form id="my-awesome-dropzone" action="/upload" class="dropzone">  
    <div class="dropzone-previews"></div>
    <div class="fallback"> <!-- this is the fallback if JS isn't working -->
        <input name="file" type="file" multiple />
    </div>

</form>
<button type="submit" id="submit-all" class="btn btn-primary btn-xs">Upload the file</button>

Ensuite, la balise script.....

Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element

    // The configuration we've talked about above
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 25,
    maxFiles: 25,

    // The setting up of the dropzone
    init: function() {
        var myDropzone = this;

        // Here's the change from enyo's tutorial...

        $("#submit-all").click(function (e) {
            e.preventDefault();
            e.stopPropagation();
            myDropzone.processQueue();
        }); 
    }
}

Answer 2

En complément de ce que sqram disait, Dropzone possède une option supplémentaire non documentée, "hiddenInputContainer". Tout ce que vous avez à faire est de définir cette option sur le sélecteur du formulaire auquel vous souhaitez que le champ de fichier caché soit ajouté. Et voilà ! Le champ de fichier ".dz-hidden-input" que Dropzone ajoute normalement au corps du formulaire se déplace comme par magie dans votre formulaire. Aucune modification du code source de Dropzone.

Bien que cela fonctionne pour déplacer le champ du fichier Dropzone dans votre formulaire, le champ n'a pas de nom. Vous devrez donc ajouter :

_this.hiddenFileInput.setAttribute("name", "field_name[]");

à dropzone.js après cette ligne :

_this.hiddenFileInput = document.createElement("input");

autour de la ligne 547.

Answer 3

Je souhaite apporter une réponse ici car j'ai moi aussi été confronté au même problème - nous voulons que l'élément $_FILES soit disponible dans le même poste qu'un autre formulaire. Ma réponse est basée sur @mrtnmgs ; cependant, elle tient compte des commentaires ajoutés à cette question.

Premièrement : Dropzone affiche ses données via ajax

Ce n'est pas parce que vous utilisez le formData.append signifie toujours que vous devez vous attaquer aux actions UX - c'est-à-dire que tout se passe en coulisses et qu'il ne s'agit pas d'un poste de formulaire typique. Les données sont affichées dans votre url paramètre.

Deuxièmement : Si vous voulez donc imiter un formulaire, vous devrez stocker les données affichées.

Cela nécessite un code côté serveur pour stocker votre $_POST ou $_FILES dans une session qui est disponible pour l'utilisateur lors du chargement d'une autre page, car l'utilisateur ne se rendra pas sur la page où les données affichées sont reçues.

Troisièmement, vous devez rediriger l'utilisateur vers la page où ces données sont traitées.

Maintenant que vous avez posté vos données, que vous les avez stockées dans une session, vous devez les afficher/agir pour l'utilisateur dans une page supplémentaire. Vous devez également envoyer l'utilisateur sur cette page.

Donc, pour mon exemple :

[Code Dropzone : Utilise Jquery]

$('#dropArea').dropzone({
    url:        base_url+'admin/saveProject',
    maxFiles:   1,
    uploadMultiple: false,
    autoProcessQueue:false,
    addRemoveLinks: true,
    init:       function(){
        dzClosure = this;

        $('#projectActionBtn').on('click',function(e) {
            dzClosure.processQueue(); /* My button isn't a submit */
        });

        // My project only has 1 file hence not sendingmultiple
        dzClosure.on('sending', function(data, xhr, formData) {
            $('#add_user input[type="text"],#add_user textarea').each(function(){
                formData.append($(this).attr('name'),$(this).val());
            })
        });

        dzClosure.on('complete',function(){
            window.location.href = base_url+'admin/saveProject';
        })
    },
});

Answer 4

Vous pouvez modifier les données du formulaire en récupérant l'événement "sending" de votre zone de dépôt.

dropZone.on('sending', function(data, xhr, formData){
        formData.append('fieldname', 'value');
});

Answer 5

Afin de soumettre tous les fichiers avec les autres données du formulaire en une seule demande, vous pouvez copier le fichier Dropzone.js temporairement caché. input dans votre formulaire. Vous pouvez le faire dans addedfiles gestionnaire d'événements :

var myDropzone = new Dropzone("myDivSelector", { url: "#", autoProcessQueue: false });
myDropzone.on("addedfiles", () => {
  // Input node with selected files. It will be removed from document shortly in order to
  // give user ability to choose another set of files.
  var usedInput = myDropzone.hiddenFileInput;
  // Append it to form after stack become empty, because if you append it earlier
  // it will be removed from its parent node by Dropzone.js.
  setTimeout(() => {
    // myForm - is form node that you want to submit.
    myForm.appendChild(usedInput);
    // Set some unique name in order to submit data.
    usedInput.name = "foo";
  }, 0);
});

Bien entendu, il s'agit d'une solution de rechange qui dépend des détails de mise en œuvre. Code source connexe .