Dropzone.js 如何使用 TR 或 TBODY 作为预览模板？

Question

有一个表格用来显示文件（每个文件占据一行），在表格上创建了一个dropzonejs，可以将文件拖放到表格中。我想在表格的每一行中添加一个“预览”功能，但我不知道该如何做。以下是我的预览模板：

<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>

问题在于 Dropzone.js 这样做：

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

TR或TBODY不是DIV的有效子元素，因此它将被创建为TEXT。TEXT没有属性querySelectorAll，并且出现了错误。

是否有解决方案可以将TR或TBODY用作预览模板？

- Łukasz Adamus

Answer 1

只需在您的代码中重新定义Dropzone.createElement函数。

我个人使用jQuery：

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

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

- striker

---

这绝对是一种更通用的解决方案，而不需要触及插件文件。 - Dan H

你可以重新定义这个函数，而无需更改任何插件文件。 - striker

Answer 2

所以，在 Dropzone.createElement 函数中进行了一些修复，解决了这个问题：

将此代码替换为：

div = document.createElement("div");

使用这个：

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

- Fraga

---

我可以接受那个答案，因为这是我解决问题的方法...尽管它不是通用解决方案。无论如何，谢谢！ - Łukasz Adamus

@striker的答案是一个更通用的解决方案，如果你正在寻找的话，请使用这种方法。 - Dan H

Answer 3

虽然我认为@strikes的答案最适合，但我附上了使用表格格式的完整实现代码，这是@strikes答案和DropzoneJS bootstrap模板的扩展。

PS：运行片段是可用的，所以您可以尝试在此处运行片段以查看它是否正常工作。

$('#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>

 

- Gayan Kavirathne