[TIL] Dropzone

Dropzone이란?

• 이미지 파일을 드래그 하여 파일을 업로드 가능하게 해준다.

<form enctype="multipart/form-data" method="post" action="/admin/products/product-gallery/<%= id %>" class="dropzone" id="dropzoneForm">
    <div class="fallback">
        <input type="file" name="file" multiple>
        <input type="submit" value="upload">
    </div>
</form>


<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />


<script>
    Dropzone.options.dropzoneForm = {
        acceptedFiles: "image/*",
        init: function() {
            this.on("queuecomplete", file => {
                setTimeout(() => {
                    location.reload();
                }, 1000);
            });
        }
    }
</script>