web-dev-qa-db-fra.com

Comment ajouter une entrée de texte au téléchargement de Dropzone

J'aimerais permettre aux utilisateurs de soumettre un titre pour chaque fichier glissé dans Dropzone qui sera entré dans une entrée de texte. Mais je ne sais pas comment l'ajouter. Tout le monde peut m'aider?

dropzone upload

Ceci est mon code de code HTML

  <form id="my-awesome-dropzone" class="dropzone">
  <div class="dropzone-previews"></div> <!-- this is were the previews should be shown. -->

  <!-- Now setup your input fields -->
  <input type="email" name="username" id="username" />
  <input type="password" name="password" id="password" />

  <button type="submit">Submit data and files!</button>
</form>

Et c'est mon code de script

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

  // The configuration we've talked about above
  url: "upload.php",
  autoProcessQueue: false,
  uploadMultiple: true,
  parallelUploads: 100,
  maxFiles: 100,
  maxFilesize:10,//MB

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

    // First change the button to actually tell Dropzone to process the queue.
    this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
      // Make sure that the form isn't actually being sent.
      e.preventDefault();
      e.stopPropagation();
      myDropzone.processQueue();
    });

    // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
    // of the sending event because uploadMultiple is set to true.
    this.on("sendingmultiple", function() {
      // Gets triggered when the form is actually being sent.
      // Hide the success button or the complete form.

    });
    this.on("successmultiple", function(files, response) {
      // Gets triggered when the files have successfully been sent.
      // Redirect user or notify of success.

    });
    this.on("errormultiple", function(files, response) {
      // Gets triggered when there was an error sending the files.
      // Maybe show form again, and notify user of error
    });
  },
  accept: function (file, done) {
        //maybe do something here for showing a dialog or adding the fields to the preview?
    },
 addRemoveLinks: true
}
</script>
templatesuploadcustom-fieldsdropzone.js
16
Duc Manh Nguyen

Vous pouvez en fait fournir un modèle à Dropzone pour le rendu de l'aperçu de l'image, ainsi que des champs supplémentaires. Dans votre cas, je suggérerais de prendre le modèle par défaut ou de créer le vôtre, et d'ajouter simplement le champ de saisie à cet endroit:

<div class="dz-preview dz-file-preview">
    <div class="dz-image"><img data-dz-thumbnail /></div>
    <div class="dz-details">
        <div class="dz-size"><span data-dz-size></span></div>
        <div class="dz-filename"><span data-dz-name></span></div>
    </div>
    <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
    <div class="dz-error-message"><span data-dz-errormessage></span></div>
    <input type="text" placeholder="Title">
</div>

Le modèle de prévisualisation complet par défaut se trouve dans le code source de dropzone.js.

Ensuite, vous pouvez simplement transmettre votre modèle personnalisé à Dropzone en tant que chaîne pour la clé previewTemplate des paramètres d’option. Par exemple:

var myDropzone = new Dropzone('#yourId', {
    previewTemplate: "..."
});

Tant que votre élément est un formulaire, Dropzone inclura automatiquement toutes les entrées dans les paramètres de requête xhr.

11
Lalo Sánchez

Je fais quelque chose d'assez similaire. Je l'ai accompli en ajoutant simplement une boîte de dialogue modale avec jquery qui s'ouvre lorsqu'un fichier est ajouté. J'espère que ça aide.

 this.on("addedfile", function() { 
   $("#dialog-form").dialog("open"); 
 });
4
Brandon Kindred

Celui-ci est en quelque sorte caché dans la documentation, mais l'endroit où ajouter des données supplémentaires se trouve dans l'événement "Envoi". L'événement d'envoi est appelé juste avant l'envoi de chaque fichier et obtient l'objet xhr et les objets formData en tant que deuxième et troisième paramètres afin que vous puissiez les modifier.

En gros, vous voudrez donc ajouter ces deux paramètres supplémentaires, puis ajouter les données supplémentaires dans la fonction "Envoi" ou, dans votre cas, "Envoi multiple". Vous pouvez utiliser jQuery ou simplement js pour obtenir les valeurs. Donc, cela devrait ressembler à quelque chose comme:

this.on("sendingmultiple", function(file, xhr, formData) {
      //Add additional data to the upload
      formData.append('username', $('#username').val());
      formData.append('password', $('#password').val());       
    });
3
nbarth

Dans ma réponse, remplacez votre champ "description" par votre champ "titre".

Ajoutez du texte ou une zone de saisie au modèle de prévisualisation. Par exemple:

<div class="table table-striped files" id="previews">

  <div id="template" class="file-row">
    <!-- This is used as the file preview template -->
    <div>
        <span class="preview"><img data-dz-thumbnail /></span>
    </div>
    <div>
        <p class="name" data-dz-name></p>
        <input class="text" type="text" name="description" id="description" placeholder="Searchable Description">
    </div>  ... etc.
  </div>
</div>

Ensuite, dans la fonction d'envoi, ajoutez les données associées:

myDropzone.on("sending", function(file, xhr, formData) {

  // Get and pass description field data
    var str = file.previewElement.querySelector("#description").value;
    formData.append("description", str);
    ...
});

Enfin, dans le script de traitement qui effectue le téléchargement, recevez les données du POST: 

$description = (isset($_POST['description']) && ($_POST['description'] <> 'undefined')) ? $_POST['description'] : '';

Vous pouvez maintenant stocker votre description (ou votre titre ou ce que vous avez) dans une base de données, etc.

J'espère que cela fonctionne pour toi. C'était un fils d'armes à comprendre.

2
TekBoss

Eh bien, j'ai trouvé une solution pour moi et je vais donc l'écrire dans l'espoir que cela pourrait également aider d'autres personnes. L'approche de base consiste à avoir une nouvelle entrée dans le conteneur de prévisualisation et à la définir via la classe css si les données du fichier sont entrantes en raison du processus de téléchargement réussi ou à l'init à partir de fichiers existants.

Vous devez intégrer le code suivant à votre code. Je viens de sauter quelques lignes qui pourraient être nécessaires pour le laisser fonctionner.

photowolke = {
    render_file:function(file)
    {
    caption = file.title == undefined ? "" : file.title;
    file.previewElement.getElementsByClassName("title")[0].value = caption;
    //change the name of the element even for sending with post later
    file.previewElement.getElementsByClassName("title")[0].id = file.id + '_title';
    file.previewElement.getElementsByClassName("title")[0].name = file.id + '_title';
    },
    init: function() {
        $(document).ready(function() {
            var previewNode = document.querySelector("#template");
            previewNode.id = "";
            var previewTemplate = previewNode.parentNode.innerHTML;
            previewNode.parentNode.removeChild(previewNode);
            photowolke.myDropzone = new Dropzone("div#files_upload", {
                init: function() {
                    thisDropzone = this;
                    this.on("success", function(file, responseText) {
                        //just copy the title from the response of the server
                        file.title=responseText.photo_title;
                        //and call with the "new" file the renderer function
                        photowolke.render_file(file);
                    });
                    this.on("addedfile", function(file) {
                       photowolke.render_file(file);
                    });
                },
                previewTemplate: previewTemplate,
            });
            //this is for loading from a local json to show existing files
            $.each(photowolke.arr_photos, function(key, value) {
                var mockFile = {
                    name: value.name,
                    size: value.size,
                    title: value.title,
                    id: value.id,
                    owner_id: value.owner_id
                };
                photowolke.myDropzone.emit("addedfile", mockFile);
                // And optionally show the thumbnail of the file:
                photowolke.myDropzone.emit("thumbnail", mockFile, value.path);
                // Make sure that there is no progress bar, etc...
                photowolke.myDropzone.emit("complete", mockFile);
            });
        });
    },
};

Et voici mon modèle pour l'aperçu:

 <div class="dropzone-previews" id="files_upload" name="files_upload"> 
         <div id="template" class="file-row">
    <!-- This is used as the file preview template -->
    <div>
        <span class="preview"><img data-dz-thumbnail width="150" /></span>
    </div>
    <div>
    <input type="text" data-dz-title class="title" placeholder="title"/>

        <p class="name" data-dz-name></p><p class="size" data-dz-size></p>
        <strong class="error text-danger" data-dz-errormessage></strong>
    </div>
    <div>

        <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
          <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
        </div>
    </div>


  </div>
0
rokdd

Pour ceux qui veulent conserver les données automatiques et envoyer des données (comme un ID ou quelque chose qui ne dépend pas de l'utilisateur), vous pouvez simplement ajouter un setTimeout à "addedfile": 

myDropzone.on("addedfile", function(file) {
    setTimeout(function(){
        myDropzone.processQueue();
    }, 10);
});
0
Pierre F

Voici ma solution:

Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#myDropzone", { 
    url: 'yourUploader.php',
    init: function () {
        this.on(
            "addedfile", function(file) {
              caption = file.caption == undefined ? "" : file.caption;
              file._captionLabel = Dropzone.createElement("<p>File Info:</p>")
              file._captionBox = Dropzone.createElement("<input id='"+file.filename+"' type='text' name='caption' value="+caption+" >");
              file.previewElement.appendChild(file._captionLabel);
              file.previewElement.appendChild(file._captionBox);
        }),
        this.on(
            "sending", function(file, xhr, formData){
            formData.append('yourPostName',file._captionBox.value);
        })
  }
});

yourUploader.php: 

<?php 
  // Your Dropzone file named 
  $myfileinfo = $_POST['yourPostName'];
  // And your files in $_FILES
?>
0
Kerim İnceöz