[Javascript] File Drag and Drop 구현

let drwFileList = [];
let addrwFileList = [];  // 새로 등록된 파일
let deleteFileList = []; // Directory의 파일 중 삭제할 파일 이름
(function($) {
    const drwFile = $("#drwUpload");
    drwFile.on('change', function () {
        if(!$.fileTypeCheck($(drwFile)[0].files[0].type)) {
            alert('jpeg,jpg,png,gif파일만 등록가능합니다.')
        } else {
            drwFileList.push($(drwFile)[0].files[0]);
            addrwFileList.push($(drwFile)[0].files[0]);
            $.addTableRow($(drwFile)[0].files[0]);
        }
    })

    // 파일 Drag and Drop
    $.fileDropDown = () => {
        let dropTable = $('#devDrwTbody');
        dropTable.on('dragenter', function (e) {
            e.stopPropagation();
            e.preventDefault();
            this.style.backgroundColor = 'darkgray';
        });

        dropTable.on('dragleave', function (e) {
            e.stopPropagation();
            e.preventDefault();
            this.style.backgroundColor = 'white';
        });

        dropTable.on('dragover', function (e) {
            e.stopPropagation();
            e.preventDefault();
            this.style.backgroundColor = 'darkgray';
        });

        dropTable.on('drop', function (e) {
            e.preventDefault();
            this.style.backgroundColor = 'white';

            let files = e.originalEvent.dataTransfer.files;
            if (files != null && files.length > 0) {
                for (let file of files) {
                    if(!$.fileTypeCheck(file.type)) {
                        alert('jpeg,jpg,png,gif파일만 등록가능합니다.')
                    } else {
                        drwFileList.push(file);
                        addrwFileList.push(file)
                    }
                }
                $.addTableRow();
            }
        });
    }

    // 파일 업로드 버튼으로 추가 한 파일 테이블 추가
    $.addTableRow = () => {
        let html = "";
        let i = $('#devDrwTbody').children().length
        if (i >= 0) {
            addrwFileList.forEach((element)=>{
                html += '<tr>'
                html += `<td  scope="col" class="t_width09">${++i}</td>`
                html += `<td  scope="col" class="t_width60">${element.name}</td>`
                html += `<td  scope="col" class="t_width25">${$.byteParse(element.size)}</td>`
                html += `<td  scope="col" class="t_width06 td_del"><button type="button" class="btn_del" onclick="$.removeDrwFile(this)">X<em class="screen_out">삭제</em></button></td>`
                html += '</tr>'
            })
        }
        $('#devDrwTbody').append(html);

        addrwFileList = [];
    }
    // 파일 업로드 창 open
    $.openDrwUpload = () => {
        $('#drwUpload').click();
    }
    // 테이블 로우 삭제
    $.removeDrwFile = (td) => {
        let tr = $(td).parent().parent();
        let check = true;
        // 기존 파일 리스트 + 할 예정임
        for (let i = 0; i < drwFileList.length; i++) {
            if (drwFileList[i].name === $(tr).children().eq(1).text()) {
                drwFileList = drwFileList.slice(0, i).concat(drwFileList.slice(i+1, drwFileList.length));
                check = false;
            }
        }
        $(tr).remove();
        // 기존 파일 중 삭제된 파일만담음
        if(check) deleteFileList.push($(tr).children().eq(1).text())
        // 파일 인덱스 변경
        $('#devDrwTbody').children().each(function (index, element) {
            $(element).find('td[class=t_width09]').text(index+1)
        })


    }
    // jpeg, jpg, png, gif 파일만 등록가능
    $.fileTypeCheck = (type) => {
        if (type == 'image/jpeg' || type == 'image/jpg' || type == 'image/png' || type == 'image/gif') {
            return true;
        } else {
            return false;
        }
    }

    $.fileDropDown()
})(jQuery);