<form action="/upload">
<div data-action="/upload-1" class="dropzone"></div>
</form>
<div style="display:none;" id="my-template">
<div class="dz-preview dz-file-preview">
<div class="dz-image"><img data-dz-thumbnail /></div>
<div class="dz-details">
<div class="dz-size"><span data-dz-size></span></div>
<div class="dz-filename"><span data-dz-name></span></div>
</div>
<div class="dz-progress">
<span class="dz-upload" data-dz-uploadprogress></span>
</div>
<div class="dz-error-message"><span data-dz-errormessage></span></div>
<div class="dz-success-mark">
<svg xmlns="http://www.w3.org/2000/svg" height="54px" viewBox="0 0 54 54" width="54px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
</div>
<div class="dz-error-mark">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="19" r="2"/><path d="M10 3h4v12h-4z"/></svg>
</div>
</div>
</div>
.dropzone {
border-radius: 4px;
border: 2px dashed #0087f7 !important;
width: 500px;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
}
.dz-success-mark {
background-color: rgb( 102, 187, 106, .8 )!important;
}
.dz-success-mark svg {
font-size: 54px;
fill: #fff !important;
}
.dz-error-mark {
background-color: rgba( 239, 83, 80, .8 ) !important;
}
.dz-error-mark svg {
font-size: 54px;
fill: #fff !important;
}
const dropzone = new Dropzone( '.dropzone', {
url: '/upload',
dictDefaultMessage: `ファイルをドラッグ＆ドロップしてしてください。<br>またはここをクリック(タップ)して画像選択してください。`,
previewTemplate: document.querySelector( '#my-template' ).innerHTML,
});
