How to make custom preview template in dropzone js

Question

I want to know how to make custom preview template. The documentation doesn't explain everything well, And I searched for tutorial about I didn't find anything.

Update

---

My html

<div id="dropzone">
  <div id="template-preview">
    <img src="assets/images/icons/plus-icon-white.png" alt="" />
    <span>Choose or drop  file from your computer</span>
    <div class="dz-preview dz-file-preview well" id="dz-preview-template">
      <div class="dz-details">
        <div class="dz-filename"><span data-dz-name></span></div>
        <div class="dz-size" data-dz-size></div>
      </div>
      <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
      <div class="dz-success-mark"><span></span></div>
      <div class="dz-error-mark"><span></span></div>
      <div class="dz-error-message"><span data-dz-errormessage></span></div>
    </div>
  </div>
</div>

My js

var drop = $('#dz-preview-template').html();
$('#dropzone').dropzone({
   url: "/upload",
   maxFilesize: 100,
   paramName: "uploadfile",
   maxThumbnailFilesize: 5,
   previewTemplate: drop,
   previewsContainer: "#template-preview"
});

Horologe

Please explain more, what you want to achieve. Do you have already a sample code? Did you already see the explanation on the dropzone.js page? dropzonejs.com/#Layout – Luu

Check update on my question @Luu – Horologe

Please see my update. I think, I found the error. – Luu

Answer 1

For me it worked with

previewTemplate: document.getElementById('preview-template').innerHTML

but I think it should be the same as using html() function in jQuery. The only thing I did differentially from your code, was to set autodiscover to false before. Maybe this helps you, too?

Dropzone.autoDiscover = false;
var uploadLogo = new Dropzone("div#uploadLogo", {
                                url: "../uploads/logo"
                                , method: "post"
                                ,...
                                ,previewTemplate: document.getElementById('preview-template').innerHTML
                                ,...
});

UPDATE

Now I think, I know what is wrong in your code. You have put the code for the template inside the dropzone div. Put it outside. Then it should work.

<div id="dropzone"></div>
<div id="template-preview">
        <div class="dz-preview dz-file-preview well" id="dz-preview-template">
                <div class="dz-details">
                        <div class="dz-filename"><span data-dz-name></span></div>
                        <div class="dz-size" data-dz-size></div>
                </div>
                <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
                <div class="dz-success-mark"><span></span></div>
                <div class="dz-error-mark"><span></span></div>
                <div class="dz-error-message"><span data-dz-errormessage></span></div>
        </div>
</div>

The text to display for your dropzone area, you can set during initializing the dropzone:

$('#dropzone').dropzone({
                    ...
                    , dictDefaultMessage: "Choose or drop  file from your computer"

Luu

just a correction the div where you store the template is called template-preview but in the javascript you call previewTemplate: document.getElementById('preview-template').innerHTML. , otherwise it works – Hostage

Thanks for the tip! putting my di outside dropzone, worked! – Somnus

Answer 2

For dropzone.js version 5.5.0 you simply create a div with the id tpl then put the template inside it. When you define dropzone just set it like this:

var myDropzone = new Dropzone(
    "div#div_submit",
    {
        url: "mypage.aspx",
        previewTemplate : document.querySelector('#tpl').innerHTML
    }
);

Saxen

Answer 3

Its worth saying that you can now use template literals (for multiline strings) so previewTemplate: '<your html>' will work instead (using back ticks not the single quotes I have here - just not sure how to escape those here!)

Hun