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

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 une zone de dépôt pour télécharger des images de l'article à vendre.

J'ai trouvé Dropzone.js qui semble faire la plupart de ce dont j'ai besoin. Cependant, lorsque vous consultez la documentation, il semble que vous deviez spécifier la classe du formulaire entier comme dropzone(par opposition à l' élément d' entrée uniquement ). Cela signifie alors que tout mon formulaire devient la zone de dépôt .

Est-il possible d'utiliser la zone de dépôt uniquement dans une partie de mon formulaire, c'est-à-dire en spécifiant uniquement l'élément en tant que classe "dropzone" , plutôt que la forme entière?

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

Voici une autre façon de le faire: ajoutez un divdans votre formulaire avec un nom de classe dropzone et implémentez dropzone par programme.

HTML:

<div id="dZUpload" class="dropzone">
      <div class="dz-default dz-message"></div>
</div>

JQuery:

$(document).ready(function () {
    Dropzone.autoDiscover = false;
    $("#dZUpload").dropzone({
        url: "hn_SimpeFileUploader.ashx",
        addRemoveLinks: true,
        success: function (file, response) {
            var imgName = response;
            file.previewElement.classList.add("dz-success");
            console.log("Successfully uploaded :" + imgName);
        },
        error: function (file, response) {
            file.previewElement.classList.add("dz-error");
        }
    });
});

Remarque: désactivation de la découverte automatique, sinon Dropzone essaiera de se connecter deux fois

Article de blog : Dropzone js + Asp.net: un moyen facile de télécharger des images en masse

J'ai eu exactement le même problème et j'ai trouvé que la réponse de Varan Sinayee était la seule qui résolvait réellement la question initiale. Cette réponse peut être simplifiée, alors voici une version plus simple.

Les étapes sont:

1. Créez une forme normale (n'oubliez pas la méthode et l'enctype args car cela n'est plus géré par dropzone).

2. Mettez un div à l'intérieur avec le class="dropzone"(c'est ainsi que Dropzone s'y attache) et id="yourDropzoneName"(utilisé pour changer les options).

3. Définissez les options de Dropzone, pour définir l'url où le formulaire et les fichiers seront publiés, désactivez autoProcessQueue (cela ne se produit que lorsque l'utilisateur appuie sur `` soumettre '') et autorisez plusieurs téléchargements (si vous en avez besoin).

4. Définissez la fonction init pour utiliser Dropzone au lieu du comportement par défaut lorsque le bouton d'envoi est cliqué.

5. Toujours dans la fonction init, utilisez le gestionnaire d'événements "sendmultiple" pour envoyer les données du formulaire avec les fichiers.

Voilà! Vous pouvez maintenant récupérer les données comme vous le feriez avec un formulaire normal, dans $ _POST et $ _FILES (dans l'exemple cela se produirait dans upload.php)

HTML

<form action="upload.php" enctype="multipart/form-data" method="POST">
    <input type="text" id ="firstname" name ="firstname" />
    <input type="text" id ="lastname" name ="lastname" />
    <div class="dropzone" id="myDropzone"></div>
    <button type="submit" id="submit-all"> upload </button>
</form>

JS

Dropzone.options.myDropzone= {
    url: 'upload.php',
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 5,
    maxFiles: 5,
    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());
        });
    }
}

"Dropzone.js" est la bibliothèque la plus courante pour télécharger des images. Si vous souhaitez que "dropzone.js" ne fasse partie de votre formulaire, vous devez suivre les étapes suivantes:

1) pour le côté client:

HTML:

    <form action="/" enctype="multipart/form-data" method="POST">
        <input type="text" id ="Username" name ="Username" />
        <div class="dropzone" id="my-dropzone" name="mainFileUploader">
            <div class="fallback">
                <input name="file" type="file" multiple />
            </div>
        </div>
    </form>
    <div>
        <button type="submit" id="submit-all"> upload </button>
    </div>

JQuery:

    <script>
        Dropzone.options.myDropzone = {
            url: "/Account/Create",
            autoProcessQueue: false,
            uploadMultiple: true,
            parallelUploads: 100,
            maxFiles: 100,
            acceptedFiles: "image/*",

            init: function () {

                var submitButton = document.querySelector("#submit-all");
                var wrapperThis = this;

                submitButton.addEventListener("click", function () {
                    wrapperThis.processQueue();
                });

                this.on("addedfile", function (file) {

                    // Create the remove button
                    var removeButton = Dropzone.createElement("<button class='btn btn-lg dark'>Remove File</button>");

                    // Listen to the click event
                    removeButton.addEventListener("click", function (e) {
                        // Make sure the button click doesn't submit the form:
                        e.preventDefault();
                        e.stopPropagation();

                        // Remove the file preview.
                        wrapperThis.removeFile(file);
                        // If you want to the delete the file on the server as well,
                        // you can do the AJAX request here.
                    });

                    // Add the button to the file preview element.
                    file.previewElement.appendChild(removeButton);
                });

                this.on('sendingmultiple', function (data, xhr, formData) {
                    formData.append("Username", $("#Username").val());
                });
            }
        };
    </script>

2) pour le côté serveur:

ASP.Net MVC

    [HttpPost]
    public ActionResult Create()
    {
        var postedUsername = Request.Form["Username"].ToString();
        foreach (var imageFile in Request.Files)
        {

        }

        return Json(new { status = true, Message = "Account created." });
    }

Le tutoriel d'Enyo est excellent.

J'ai trouvé que l'exemple de script dans le didacticiel fonctionnait bien pour un bouton intégré dans la zone de dépôt (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 faire en utilisant un événement click:

Tout 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();
        }); 
    }
}

En plus de ce que disait sqram, Dropzone a 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 ajouter le champ de fichier caché. Et voila! Le champ de fichier ".dz-hidden-input" que Dropzone ajoute normalement au corps se déplace comme par magie dans votre formulaire. Aucune modification du code source de Dropzone.

Maintenant que cela fonctionne pour déplacer le champ de 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");

vers la ligne 547.

J'ai une solution plus automatisée pour cela.

HTML:

<form role="form" enctype="multipart/form-data" action="{{ $url }}" method="{{ $method }}">
    {{ csrf_field() }}

    <!-- You can add extra form fields here -->

    <input hidden id="file" name="file"/>

    <!-- You can add extra form fields here -->

    <div class="dropzone dropzone-file-area" id="fileUpload">
        <div class="dz-default dz-message">
            <h3 class="sbold">Drop files here to upload</h3>
            <span>You can also click to open file browser</span>
        </div>
    </div>

    <!-- You can add extra form fields here -->

    <button type="submit">Submit</button>
</form>

JavaScript:

Dropzone.options.fileUpload = {
    url: 'blackHole.php',
    addRemoveLinks: true,
    accept: function(file) {
        let fileReader = new FileReader();

        fileReader.readAsDataURL(file);
        fileReader.onloadend = function() {

            let content = fileReader.result;
            $('#file').val(content);
            file.previewElement.classList.add("dz-success");
        }
        file.previewElement.classList.add("dz-complete");
    }
}

Laravel:

// Get file content
$file = base64_decode(request('file'));

Pas besoin de désactiver DropZone Discovery et la soumission de formulaire normale sera en mesure d'envoyer le fichier avec tous les autres champs de formulaire via la sérialisation de formulaire standard.

Ce mécanisme stocke le contenu du fichier sous forme de chaîne base64 dans le champ de saisie masqué lorsqu'il est traité. Vous pouvez le décoder en chaîne binaire en PHP via la base64_decode()méthode standard .

Je ne sais pas si cette méthode sera compromise avec des fichiers volumineux, mais elle fonctionne avec des fichiers ~ 40 Mo.

Vous pouvez modifier le formData en capturant l'événement 'envoi' depuis votre zone de dépôt.

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

Afin de soumettre tous les fichiers avec d'autres données de formulaire en une seule demande, vous pouvez copier les inputnœuds cachés temporaires de Dropzone.js dans votre formulaire. Vous pouvez le faire dans le addedfilesgestionnaire 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);
});

Il s'agit évidemment d'une solution de contournement dépendante des détails de mise en œuvre. Code source associé .

Je veux 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 message qu'un autre formulaire. Ma réponse est basée sur @mrtnmgs mais note les commentaires ajoutés à cette question.

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

Juste parce que vous utilisez l' formData.appendoption signifie toujours que vous devez vous attaquer aux actions UX - c'est-à-dire que tout se passe dans les coulisses et n'est pas un post de formulaire typique. Les données sont enregistrées dans votre urlparamètre.

Deuxièmement: si vous souhaitez par conséquent imiter une publication de formulaire, vous devrez stocker les données publiées

Cela nécessite un code côté serveur pour stocker votre $_POSTou $_FILESdans une session qui est disponible pour l'utilisateur sur un autre chargement de page car l'utilisateur n'ira pas à la page où les données publiées sont reçues.

Troisièmement: vous devez rediriger l'utilisateur vers la page sur laquelle ces données sont exploitées

Maintenant que vous avez publié vos données, les avez stockées dans une session, vous devez les afficher / les actionner 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';
        })
    },
});

Ceci est juste un autre exemple de la façon dont vous pouvez utiliser Dropzone.js dans un formulaire existant.

dropzone.js:

 init: function() {

   this.on("success", function(file, responseText) {
     //alert("HELLO ?" + responseText); 
     mylittlefix(responseText);
   });

   return noop;
 },

Puis, plus tard dans le fichier j'ai mis

function mylittlefix(responseText) {
  $('#botofform').append('<input type="hidden" name="files[]" value="'+ responseText +'">');
}

Cela suppose que vous ayez un div avec un identifiant de #botofformcette façon lors du téléchargement, vous pouvez utiliser les noms des fichiers téléchargés.

Remarque: mon script de téléchargement a renvoyé le fichier uploadedfilename.jpeg dubblenote, vous devrez également créer un script de nettoyage qui vérifie le répertoire de téléchargement pour les fichiers non utilisés et les supprime .. si dans un formulaire non authentifié frontal :)

Voici mon exemple, basé sur Django + Dropzone. La vue a sélectionné (obligatoire) et soumettre.

<form action="/share/upload/" class="dropzone" id="uploadDropzone">
    {% csrf_token %}
        <select id="warehouse" required>
            <option value="">Select a warehouse</option>
                {% for warehouse in warehouses %}
                    <option value={{forloop.counter0}}>{{warehouse.warehousename}}</option>
                {% endfor %}
        </select>
    <button id="submit-upload btn" type="submit">upload</button>
</form>

<script src="{% static '/js/libs/dropzone/dropzone.js' %}"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script>
    var filename = "";

    Dropzone.options.uploadDropzone = {
        paramName: "file",  // The name that will be used to transfer the file,
        maxFilesize: 250,   // MB
        autoProcessQueue: false,
        accept: function(file, done) {
            console.log(file.name);
            filename = file.name;
            done();    // !Very important
        },
        init: function() {
            var myDropzone = this,
            submitButton = document.querySelector("[type=submit]");

            submitButton.addEventListener('click', function(e) {
                var isValid = document.querySelector('#warehouse').reportValidity();
                e.preventDefault();
                e.stopPropagation();
                if (isValid)
                    myDropzone.processQueue();
            });

            this.on('sendingmultiple', function(data, xhr, formData) {
                formData.append("warehouse", jQuery("#warehouse option:selected").val());
            });
        }
    };
</script>