[javascript] 드래그엔 드롭으로 파일 업로드 간단 예제

특정영역에 파일으 마우스 드래그로 올려 놓으면 파일 업로드 되는 예제

<style>
    .uploadbox{
        width:800px;
        height:300px;
        border:1px solid gray;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>


<div class="uploadbox">
    파일을 이곳에 올려주세요.
</div>

<script>
    const box = document.querySelector(".uploadbox");

    box.addEventListener("dragover",function(e){
        e.preventDefault();
    });

    box.addEventListener("drop",function(e){
        e.preventDefault();

        if(e.dataTransfer.files[0]){
            const form = new FromData();
            form.append("file",myFileInput.files[0], "test.jpg");

            fetch("/upload",{
                method: "POST",
                headers: {
                    "Content-Type": "multipart/form-data",
                }, 
                body: form
            });
        }

    });
</script>