DropzoneJS with div table layout
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><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<div><div>class="dz-preview"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>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.
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.