Dropzone.js How to use TR or TBODY as preview Template?

Question

There is a table which displays files (one tr one file) there is a dropzonejs created on table so I can drag file and drop on table. I would like to add a "preview" as TR element of a table but I can't do this. This is how my preview template looks like:

<tr class="dz-preview">
    <td><span class="name" data-dz-name></span></td>
    <td><span class="size" data-dz-size></span></td>
    <td colspan="5">
    <div class="progress" 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>
    </td>
</tr>

Problem is that Dropzone.js does this:

Dropzone.createElement = function(string) {
    var div;
    div = document.createElement("div");
    div.innerHTML = string;
    return div.childNodes[0];
};

TR or TBODY is not valid child of DIV so it will be created as TEXT, TEXT doesn't have property querySelectorAll, and there is an error.

Is there a solution to use TR or TBODY as preview template?

Answer 1

Just redefine Dropzone.createElement function in your code.

In my case I use jQuery:

$(function() {
    Dropzone.createElement = function(string) {
        var el = $(string);
        return el[0];
    };

    var dropzone = new Dropzone(document.body, options);
});