DropzoneJS with div table layout

Question

The general question:

How can I get the added row in my Dropzone to fill the full width of the table when it's by default being wrapped in an element that ruins my table layout.

Explanation:

I'm trying to get DropzoneJS to show uploaded files in a table format. My Dropzone is correctly on my table but I can't get the previewTemplate to present properly.
First of all, the issue arises because Dropzone cannot add files to a

<td></td>

element, so I converted my table to a table layout format like this using CSS

<div class="div-tr">

    <div class="div-td"></div>

    <div class="div-td"></div>

</div>

My goal is therefore to add a previewTemplate to DropzoneJS which would look like this

<div class="div-tr">

    <div class="div-td">

        <i class="fa fa-file-o"></i>

    </div>

    <div class="div-td">

        <div class="dz-filename">

            <span data-dz-name></span>

        </div>

    </div>

    <div class="div-td">

        <div class="dz-size" data-dz-size></div>

    </div>

    <div class="div-td">

        <div class="dz-progress">

            <span class="dz-upload" data-dz-uploadprogress></span>

        </div>

    </div>

    <div class="div-td">

        <div class="dz-success-mark">

            <span>✔</span>

        </div>  

        <div class="dz-error-mark">

            <span>✘</span>

        </div>

    </div>

</div>

The problem is that Dropzone by default adds a set of classes

dz-processing dz-image-preview dz-error dz-success

to a

<div>

in the previewTemplate. According to the docs, they will be added to a

<div>

with

class="dz-preview"

, but no matter whether that class exists or not the other classes are added as the first inner element of the container, that previewTemplate is injected in.
This means that the previewTemplate, which was supposed to be a table row, loses it's properties and now only shows in the width of the first

<div class="div-td">

+-------------+--------------+-----------+----------+

|             |              |           |          |   Existing row

+-------------+--------------+-----------+----------+

|             |              |           |          |   Existing row

+-------------+--------------+-----------+----------+

|             |              |           |          |   Existing row

+-------------+--------------+-----------+----------+

|             |              |           |          |   Existing row

+-------------+--------------+-----------+----------+

|   |   |  |  |                                         Row added by upload

+---+---+--+--+

This happens because there is an extra

<div>

being added that wraps the inner of the row.

My CSS for the table looks like this

/* DIV table style */



.div-table{

     display: table;

     width: 100%;

     background-color: #fff;

}

.div-tr{

    display: table-row;

}

.div-th, .div-td {

    display: table-cell;

    padding: 8px 15px;

    border-bottom: 1px solid #eaeff0;

    vertical-align: middle;

}

.div-thead{

    display: table-header-group;

    font-weight: bold;

}

.div-tfoot{

    display: table-footer-group;

    font-weight: bold;

    background-color: #fff;

}

.div-tbody{

    display: table-row-group;

}

Documentation for the layout is found here: http://www.dropzonejs.com/#layout

Any help for changing the CSS or JS is appreciated.

Answer 1

As stated in the dropzone documentation you can customize the preview template as you wish, in this case you just need to add your div-tr and div-td classes to the preview elements according to your needs, http://www.dropzonejs.com/#theming.

Here is an example of how override the dropzone template:

Html:

<div class="dropzone" id="myDropzone"></div>

    <div class="dropzone-previews div-table"></div>

    <div id="preview-template" style="display: none;">
        <div class="dz-preview dz-file-preview div-tr">
            <div class="dz-details">
                <div class="dz-filename div-td"><span data-dz-name></span></div>
                <div class="dz-size div-td" data-dz-size></div>
                <div class="dz-image div-td">
                    <img data-dz-thumbnail />
                </div>
            </div>
            <div class="dz-progress div-td"><span class="dz-upload" data-dz-uploadprogress></span></div>
            <div class="div-td">
                <div class="dz-success-mark"><span>✔</span></div>
                <div class="dz-error-mark"><span>✘</span></div>
            </div>
            <div class="dz-error-message div-td"><span data-dz-errormessage></span></div>
        </div>
    </div>

js:

Dropzone.options.myDropzone = {
    previewsContainer: ".dropzone-previews",
    previewTemplate: document.getElementById('preview-template').innerHTML,
    url: 'upload.php',
    init: function() {
        this.on('success', function(file){
            var errordiv = document.getElementsByClassName('dz-error-mark');
            errordiv[errordiv.length - 2].style.display = 'none'; // The -2 is because there is also one in the preview-template
        });
        this.on('error', function(file){
            var succesdiv = document.getElementsByClassName('dz-success-mark');
            succesdiv[succesdiv.length - 2].style.display = 'none'; 
        });
    }
}

Note that if you want to use a table you can by just wrapping the elements in the preview with <td> and <tr> and use as previewsContainer a table instead of a div.

Because the elements dz-error-mark and dz-success-mark are always visible in dropzone by default, you may want to hide them accordingly to the events, this is what does the code inside the init function. Or maybe is better to not display them at the beginning and show them accordingly.

Have in mind that as you make changes in the template, things are going to start not displaying properly if you don't modify also the default behavior of dropzone.

Here you can see an example of a heavily customized dropzone, also mentioned in the dropzone documentation.