dropzone.js Is it possible to show filename in the preview?

Question

By Default, in the preview state, I have to hover on the image preview to see the filename. but Is it possible to put filename outside the hoverzone? (see the screenshot)

This is my try but not work

<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

You can take the file name in any event in add it to the preview element, here is an example in the addedfile event:

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 your previewTemplate, use like this

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