CODEWITHSUNDEEP
javascriptdropzone.js
mohamed youssouf
mohamed youssouf

Reputation: 1573

How to make custom preview template in dropzone js

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"
});

Upvotes: 7

Views: 49210

Answers (3)

Antony
Antony

Reputation: 4364

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!)

Upvotes: 0

Izle
Izle

Reputation: 117

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

Upvotes: 1

dns_nx
dns_nx

Reputation: 3953

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"

Upvotes: 15

Related Questions