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>
<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>
dz-processing dz-image-preview dz-error dz-success
<div>
<div>
class="dz-preview"
<div class="div-td">
+-------------+--------------+-----------+----------+
| | | | | Existing row
+-------------+--------------+-----------+----------+
| | | | | Existing row
+-------------+--------------+-----------+----------+
| | | | | Existing row
+-------------+--------------+-----------+----------+
| | | | | Existing row
+-------------+--------------+-----------+----------+
| | | | | Row added by upload
+---+---+--+--+
<div>
/* 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;
}
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.