<div id="exampleDropzone">
    <input name="file" type="file" accept="image/png, image/jpg, image/jpeg"/>
</div>

.dropzone{width:100%;height:200px;border:1px dashed rgba(0,0,0,.5);border-radius:15px;font-family:Arial;text-align:center;position:relative;line-height:180px;font-size:20px;background-color:rgba(223,223,223,.3)}.dropzone input{position:absolute;left:0;top:0;opacity:0;width:150px;height:40px}.dropzone img{display:block;max-width:250px;max-height:100px;width:auto;height:auto;margin:auto;display:block;margin-top:20px}.dropzone.mouseOver{border:1px dashed rgba(0,0,0,.5);background-color:rgba(211,229,250,.5)}.browseButton{position:absolute;left:50%;top:50%;margin-left:-75px;margin-top:20px;line-height:26px;text-align:center;color:#fff;font-size:12px;width:150px;height:40px;border-radius:4px;background-color:#0f2791}.browseButton:hover{background-color:#4460dd}

!function(){let e={clickText:"or click here",dragText:"Drag a file here",numFilesErrorMessage:"Only one file is allowed",numFilesErrorFunction:function(e){alert(e)},invalidFileTypeErrorMessage:"Invalid file type",invalidFileTypeErrorFunction:function(e){alert(e)},imagePreview:!0},t=e=>e&&e.type.includes("image/"),i=e=>{e.preventDefault(),e.stopPropagation()},s=(e,t,...i)=>{let s=document.createElement(e);return Object.entries(t).forEach(([e,t])=>{e.startsWith("on")?s.addEventListener(e.substring(2).toLowerCase(),t):s.setAttribute(e,t)}),s.append(...i),s};window.EasyDropzone=class n{config=e;dropZone;fileInput;dragSpan;browseButton;imagePreview;constructor(t,i={}){this.config=Object.assign({},e,i),this.dropZone=t instanceof HTMLElement?t:document.getElementById(t),this.dropZone.classList.add("dropzone");let n=this.dropZone.querySelector("input[type=file]");if(!n)throw Error("EasyDropzone requires a file input inside the dropzone element");this.fileInput=n;let r=[];this.dragSpan=s("span",{style:"cursor: default;"},this.config.dragText),r.push(this.dragSpan),this.config.imagePreview&&r.push(this.imagePreview=s("img",{style:"display: none;"}));let a=s("button",{class:"browseButton"},this.config.clickText);r.push(a),this.dropZone.append(...r),this.prepareDropzoneEvents(),a.appendChild(n),n.addEventListener("change",e=>{1==n.files.length?(this.dragSpan.textContent=n.files[0].name,this.adjustContainer(n.files)):this.dragSpan.textContent=this.config.dragText},!1)}prepareDropzoneEvents(){this.dropZone.addEventListener("drop",e=>{i(e),this.setInput(e)},!1),this.dropZone.addEventListener("dragover",e=>{i(e),this.dropZone.classList.add("mouseOver")},!1),["dragleave","drop"].forEach(e=>{this.dropZone.addEventListener(e,e=>{this.dropZone.classList.remove("mouseOver")},!1)})}setInput(e){if(1!=e.dataTransfer.files.length){this.config.numFilesErrorFunction(this.config.numFilesErrorMessage);return}let t=this.fileInput.accept.split(",").map(e=>e.trim()),i=e.dataTransfer.files[0].type,s=i.split("/")[0];if(this.fileInput.accept.length>0&&!(t.includes(i)||t.includes("*/*")||t.includes(`${s}/*`))){this.config.invalidFileTypeErrorFunction(this.config.invalidFileTypeErrorMessage);return}this.adjustContainer(e.dataTransfer.files)}adjustContainer(e){this.fileInput.files=e,this.dragSpan.textContent=e[0].name,this.config.imagePreview&&(t(e[0])?(this.show(this.imagePreview),this.hide(this.dragSpan),this.imagePreview.src=URL.createObjectURL(e[0]),this.imagePreview.addEventListener("load",()=>{URL.revokeObjectURL(this.imagePreview.src)})):(this.show(this.dragSpan),this.hide(this.imagePreview)))}show(e){e.style.display=""}hide(e){e.style.display="none"}}}();

    var config = {
        clickText: "又はクリックで選択",
        dragText: "ここに画像をドラッグしてアップロード",
    }

new EasyDropzone('exampleDropzone', config);