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

Answer 2

So here's a little fix in Dropzone.createElement function that fixes the problem:

Replace this:

div = document.createElement("div");

With this:

if (string.substr(0, 3) == '<tr'){
    // Table elements can not be wrapped into a div
    div = document.createElement("tbody");
} else {
    div = document.createElement("div");
}

Answer 3

While I recommend @strikes answer as the most suitable answer. I'm attaching this code of a complete implementation using a tabular format which is a extension of @strikes answer and DropzoneJS bootstrap template

PS: Run snippet is functional, so you can try running the snippet here to see if it is properly working.

 $('#allselect').change(function () { var selections = document.getElementsByName('selection'); for( var i=0; i<selections.length; i++){ if(selections[i].checked == false) { selections[i].checked = true; } else { if(selections[i].checked == true) { selections[i].checked = false; } } }; }); </script> <script> // Get the template HTML and remove it from the doument var previewNode = document.querySelector("#template"); previewNode.id = ""; var previewTemplate = previewNode.parentNode.innerHTML; previewNode.parentNode.removeChild(previewNode); Dropzone.createElement = function(string) { var el = $(string); return el[0]; }; var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone url: "{{ route('user.warehouse_images.store') }}", // Set the url thumbnailWidth: 80, paramName: "warehouse_image", thumbnailHeight: 80, parallelUploads: 20, previewTemplate: previewTemplate, autoQueue: false, // Make sure the files aren't queued until manually added previewsContainer: "#previews", // Define the container to display the previews clickable: ".fileinput-button", // Define the element that should be used as click trigger to select files. renameFile: function(file) { var dt = new Date(); var time = dt.getTime(); return time+file.name; }, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, }); myDropzone.on("addedfile", function (file) { // Hookup the start button file.previewElement.querySelector(".start").onclick = function () { myDropzone.enqueueFile(file); }; }); // Update the total progress bar myDropzone.on("totaluploadprogress", function (progress) { document.querySelector("#total-progress .progress-bar").style.width = progress + "%"; }); myDropzone.on("sending", function (file) { // Show the total progress bar when upload starts document.querySelector("#total-progress").style.opacity = "1"; // And disable the start button file.previewElement.querySelector(".start").setAttribute("disabled", "disabled"); }); // Hide the total progress bar when nothing's uploading anymore myDropzone.on("queuecomplete", function (progress) { document.querySelector("#total-progress").style.opacity = "0"; }); myDropzone.on("sending", function(file, xhr, formData){ formData.append("camera_id", "loremipsum"); console.log(file); console.log(file.upload.filename); console.log(xhr); }); // Setup the buttons for all transfers // The "add files" button doesn't need to be setup because the config // `clickable` has already been specified. document.querySelector("#actions .start").onclick = function () { myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED)); }; document.querySelector("#actions .cancel").onclick = function () { myDropzone.removeAllFiles(true); };

 html, body { height: 100%; } #actions { margin: 2em 0; } /* Mimic table appearance */ div.table { display: table; } div.table .file-row { display: table-row; } div.table .file-row > div { display: table-cell; vertical-align: top; border-top: 1px solid #ddd; padding: 8px; } div.table .file-row:nth-child(odd) { background: #f9f9f9; } /* The total progress gets shown by event listeners */ #total-progress { opacity: 0; transition: opacity 0.3s linear; } /* Hide the progress bar when finished */ #previews .file-row.dz-success .progress { opacity: 0; transition: opacity 0.3s linear; } /* Hide the delete button initially */ #previews .file-row .delete { display: none; } /* Hide the start and cancel buttons and show the delete button */ #previews .file-row.dz-success .start, #previews .file-row.dz-success .cancel { display: none; } #previews .file-row.dz-success .delete { display: block; } .custom-control { position: relative; display: block; min-height: 1.5rem; padding-left: 2.5rem; }

 <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.0/dropzone.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.0/basic.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.0/dropzone.js'></script> </head> <body> <!--File Dropzone-- --> <div id="actions" class="row"> <div class="col-lg-1"> <div class="custom-control custom-checkbox"> <input class="custom-control-input" type="checkbox" id="allselect"> <label for="allselect" class="custom-control-label"></label> </div> </div> <div class="col-lg-7"> <!-- The fileinput-button span is used to style the file input field as button --> <span class="btn btn-success fileinput-button dz-clickable"> <i class="fa fa-plus"></i> <span>Add files...</span> </span> <button type="submit" class="btn btn-primary start"> <i class="fa fa-upload"></i> <span>Start upload</span> </button> <button type="reset" class="btn btn-warning cancel"> <i class="fa fa-ban"></i> <span>Cancel upload</span> </button> </div> <div class="col-lg-4"> <!-- The global file processing state --> <span class="fileupload-process"> <div id="total-progress" class="progress progress-striped active" 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> </span> </div> </div> <div class="row"> <table class="table table-striped"> <thead> <tr> <th>Select</th> <th>Image Preview</th> <th>Image Name</th> <th>Camera</th> <th>Date</th> <th>Progress</th> <th>Actions</th> </tr> </thead> <tbody class="table table-striped files" id="previews"> <tr id="template" class="file-row"> <td> <input type="checkbox" name="selection"> </td> <td> <span class="preview"><img data-dz-thumbnail/></span> </td> <td> <p class="name" data-dz-name></p> <strong class="error text-danger" data-dz-errormessage></strong> </td> <td> <p class="cameraText"> Camera Not set</p> </td> <td> <p class="timestamp">Date Not Set</p> </td> <td> <p class="size" data-dz-size></p> <div class="progress progress-striped active" 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> <td> <button class="btn btn-primary start"> <i class="fa fa-upload"></i> <span>Start</span> </button> <button data-dz-remove class="btn btn-warning cancel"> <i class="fa fa-ban"></i> <span>Cancel</span> </button> <button data-dz-remove class="btn btn-danger delete"> <i class="fa fa-trash"></i> <span>Delete</span> </button> </td> <td> <p class="camera" style="visibility: hidden"></p> </td> </tr> </tbody> </table> </div> </body>