dropzone.js Ist es möglich, Dateinamen in der Vorschau anzuzeigen?

Question

Standardmäßig muss ich im Vorschau-Zustand auf die Bildvorschau zeigen, um den Dateinamen zu sehen. aber ist es möglich, Dateiname außerhalb der Hoverzone zu setzen? (Siehe Screenshot)

Dies ist mein Versuch, aber nicht funktioniert

<form id="my-awesome-dropzone" class="dropzone" method="post" enctype="multipart/form-data" action="upload.php"> 
    <div class="dz-filename"> 
     <span data-dz-name></span> 
    </div> 
    <div class="dropzone-previews"></div> 


    Manga Title:<input type="text" name="title" /> <br> 
    Chapter:<input type="text" name="chapter" /> <br> 

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

Answer 1

Sie die Dateinamen an das Vorschau-Element auf jedem Fall in Add nehmen kann, ist hier ein Beispiel in dem addedfile Ereignisse :

js:

Dropzone.options.myAwesomeDropzone = { 

    init: function() { 

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

      var preview = document.getElementsByClassName('dz-preview'); 
      preview = preview[preview.length - 1]; 

      var imageName = document.createElement('span'); 
      imageName.innerHTML = file.name; 

      preview.insertBefore(imageName, preview.firstChild); 

     }); 
    } 
}; 

Answer 2

in Ihrem previewTemplate, wie diese

verwenden

<div class="dz-preview dz-file-preview"> 
       <div class="dz-details"> 
       <div class="dz-filename"><span data-dz-name class="badge badge-success"></span></div> 
       <img data-dz-thumbnail style="height:100px;width:100px;"/> 
       <div class="dz-filename"><span data-dz-name class="badge badge-success"></span></div> 
       <div class="dz-error-message"><span data-dz-errormessage></span></div> 
       <div class="dz-details"> 
       </div> 
       <img src="assets/img/fileRemoveIcon.png" style="width: 40px;margin-top: -227px;margin-left: 70px;" alt="remove" data-dz-remove /> 

       </div> 
      </div>`