Untitled

<!-- /views/upload.html -->
<html>

<head>
    <title>DropzoneJS Uploader</title>
    <link href="/static/dropzone.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="/static/dropzone.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//kit.fontawesome.com/6026eddbe0.js"></script>
    <style>
    .container {
        border: 1px solid red;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 600px;
        height: 480px;
        transform: translateY(-50%) translateX(-50%);
    }
    </style>
</head>

<body>

    <div class="container" id="container">
        <div id="actions" class="row">
            <div class="col-lg-7">
                <span class="btn btn-success fileinput-button">
                    <i class="fas fa-plus"></i>
                    <span>Browse</span>
                </span>
                or drag images here.
                <button type="submit" class="btn btn-primary start">
                    <i class="fas fa-arrow-up"></i>
                    <span>Start upload</span>
                </button>
            </div>

<!--
            <div class="col-lg-5">
                <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="table table-striped" class="files" id="previews">

            <div id="template" class="file-row">
                <div>
                    <span class="preview"><img data-dz-thumbnail /></span>
                </div>
                <div>
                    <p class="name" data-dz-name></p>
                    <strong class="error text-danger" data-dz-errormessage></strong>
                </div>
                <div>
                    <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>
                </div>
                <div>
                    <button class="btn btn-primary start">
                        <i class="glyphicon glyphicon-upload"></i>
                        <span>Start</span>
                    </button>
                    <button data-dz-remove class="btn btn-warning cancel">
                        <i class="glyphicon glyphicon-ban-circle"></i>
                        <span>Cancel</span>
                    </button>
                    <button data-dz-remove class="btn btn-danger delete">
                        <i class="glyphicon glyphicon-trash"></i>
                        <span>Delete</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        var previewNode = document.querySelector("#template");
        previewNode.id = "";
        var previewTemplate = previewNode.parentNode.innerHTML;
        previewNode.parentNode.removeChild(previewNode);

        var myDropzone = new Dropzone("body", {
            url: "/upload",
            thumbnailWidth: 80,
            thumbnailHeight: 80,
            parallelUploads: 20,
            previewTemplate: previewTemplate,
            autoQueue: false,
            previewsContainer: "#previews",
            clickable: ".fileinput-button",
            headers: { "My-Awesome-Header": "header value" }
        });

        myDropzone.on("addedfile", function (file) {
            file.previewElement.querySelector(".start").onclick = function () { myDropzone.enqueueFile(file); };
        });

        myDropzone.on("totaluploadprogress", function (progress) {
            document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
        });

        myDropzone.on("sending", function (file) {
            document.querySelector("#total-progress").style.opacity = "1";
            file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
        });

        myDropzone.on("queuecomplete", function (progress) {
            document.querySelector("#total-progress").style.opacity = "0";
        });

        document.querySelector("#actions .start").onclick = function () {
            myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
        };

        document.querySelector("#actions .cancel").onclick = function () {
            myDropzone.removeAllFiles(true);
        };
    </script>

</body>

</html>