<form action="/upload">
<div class="dropzone dropzone-1"></div>
<div class="dropzone dropzone-2"></div>
</form>
<div style="display:none;" id="my-template">
<div id="mytmp" 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 class="dz-remove" data-dz-remove>
<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" />
<path d="M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
</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, 0.8) !important;
}
.dz-success-mark svg {
font-size: 54px;
fill: #fff !important;
}
.dz-error-mark {
background-color: rgba(239, 83, 80, 0.8) !important;
}
.dz-error-mark svg {
font-size: 54px;
fill: #fff !important;
}
#mytmp .dz-remove {
z-index: 999;
position: absolute;
display: block;
top: 0%;
left: 0%;
margin-left: -16px;
margin-top: -16px;
}
#mytmp .dz-remove svg {
fill: #444;
cursor: pointer;
}
const dropzone = new Dropzone(".dropzone-1", {
url: "/upload",
dictDefaultMessage: `オプション設定`,
addRemoveLinks: true,
dictCancelUpload: "キャンセル",
dictRemoveFile: "削除"
});
const dropzone2 = new Dropzone(".dropzone-2", {
url: "/upload",
dictDefaultMessage: `テンプレート設定`,
previewTemplate: document.querySelector("#my-template").innerHTML
});
