error when applying template to dropzonejs

Question

I’m having a hard time understanding the workings of the dropzoneJS Even though I have consulted the documentation I have not understood how this change is made. End result I’d like to get is image1

My stylesheets are okay. when applying the Dropzone it returns me the

ERROR imagem2

 `dropzone.min.js:766 Uncaught TypeError: Cannot read property 'trim' of undefined
    at Dropzone.addedfile (dropzone.min.js:766)
    at Dropzone.emit (dropzone.min.js:89)
    at Dropzone.addFile (dropzone.min.js:1905)
    at HTMLInputElement.<anonymous> (dropzone.min.js:1266)`

HTML

`<div class="row m-b-sm m-t-sm">
    <div class="col-md-12">
        <button type="button" id="chose-files-btn" class="btn btn-outline-primary btn-sm dz-clickable"> SELECIONAR ARQUIVOS</button>
        <button type="button" id="delete-all-files-btn" class="btn btn-outline-warning btn-sm"> REMOVER TUDO</button>
        <button type="button" id="send-all-files-btn" class="btn btn-outline-success btn-sm"> ENVIAR TUDO</button>
    </div>
</div>
<div class="project-list" id="dropzoneCustom">
    <table class="table table-hover">
        <tbody>
        <tr id="tpl">
            <td class="project-status">
                <span class="label label-primary" data-dz-size></span>
            </td>
            <td class="project-status">
                <span class="label label-danger text-uppercase" data-dz-errormessage></span>
            </td>
            <td class="project-title">
                <span data-dz-name></span>
                <br/>
                <small data-dz-size></small>
            </td>
            <td class="project-completion">
                <small>Completion with: 28%</small>
                <div class="progress progress-mini">
                    <div data-dz-uploadprogress class="progress-bar"></div>
                </div>
            </td>
            <td class="project-people">
                <img data-dz-thumbnail />
            </td>
            <td class="project-actions">
                <a href="#" class="btn btn-white btn-sm"><i class="fa fa-folder"></i> View </a>
                <a href="#" class="btn btn-white btn-sm"><i class="fa fa-pencil"></i> Edit </a>
            </td>
        </tr>
        </tbody>
    </table>
</div>`

JAVA SCRIPT / JQUERY

Dropzone.autoDiscover = false;
    $('#dropzoneCustom').dropzone({
        previewsContainer: "#tpl",
        clickable: "#chose-files-btn",
        url: "{{route('photos.store')}}",
        autoProcessQueue: false,
        method: "POST",
        parallelUploads: 5,
        uploadMultiple: true,
        paramName: "profilePhotos",
        maxFiles: 50,
        addRemoveLinks: true,
        previewTemplate: $('#tpl').innerHTML,
    });

Answer 1

In line 766 of Dropzone.min.js some variable is like "Undefined", in this question they had a similar question, see if it helps you: https://stackoverflow.com/questions/32733423/uncaught-typeerror-cannot-read-property-trim-of-undefined-in-jquery