[Ajax] file drag and drop upload

참고: https://www.easydevguide.com/posts/drag_drop_upload

Upload multiple files using "drag and drop" with html5 and flask - EasyDevGuide.com

 

- .py

@viewController.route("/ajax_fileUpload", methods=['GET', 'POST'])
def ajax_fileUpload():
    files = request.files.getlist('files')
    FILSE_DIR = ""	#파일 다운로드 경로
    for file in files:
        fn = secure_filename(file.filename)
        file.save(os.path.join(FILSE_DIR, fn))  # replace FILES_DIR with your own directory
    return render_template("ajax_test.html")

 

- .html

<div id="drop_area" style="padding:100px; border: 1px solid black">
    Drag and drop your files here to upload.
</div>
<div id="upload_progress"></div>
<div id="speed"></div>

<!-- 스크립트 파일 포함 -->
<script src="/static/js/ajax.js"></script>

 

- .js

// prevent the default behavior of web browser
['dragleave', 'drop', 'dragenter', 'dragover'].forEach(function (evt) {
    document.addEventListener(evt, function (e) {
        e.preventDefault();
    }, false);
});

var drop_area = document.getElementById('drop_area');

drop_area.addEventListener('dragenter', function (e) {
    e.preventDefault();
    drop_area.style.backgroundColor = "#FCB9AA";
}, false);

drop_area.addEventListener('dragleave', function (e) {
    e.preventDefault();
    drop_area.style.backgroundColor = "#FFFFFF";
}, false);

drop_area.addEventListener('drop', function (e) {
    e.preventDefault();
    var fileList = e.dataTransfer.files; // the files to be uploaded
    if (fileList.length == 0) {
        return false;
    }

    // we use XMLHttpRequest here instead of fetch, because with the former we can easily implement progress and speed.
    var xhr = new XMLHttpRequest();
    xhr.open('post', '/view/ajax_fileUpload', true); // aussume that the url /upload handles uploading.
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            // uploading is successful
            alert('Successfully uploaded!');  // please replace with your own logic
        }
    };

    // show uploading progress
    var lastTime = Date.now();
    var lastLoad = 0;
    xhr.upload.onprogress = function (event) {
        if (event.lengthComputable) {
            // update progress
            var percent = Math.floor(event.loaded / event.total * 100);
            document.getElementById('upload_progress').textContent = percent + '%';

            // update speed
            var curTime = Date.now();
            var curLoad = event.loaded;
            var speed = ((curLoad - lastLoad) / (curTime - lastTime) / 1024).toFixed(2);
            document.getElementById('speed').textContent = speed + 'MB/s'
            lastTime = curTime;
            lastLoad = curLoad;
        }
    };

    // send files to server
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    var fd = new FormData();
    for (let file of fileList) {
        fd.append('files', file);
    }
    lastTime = Date.now();
    xhr.send(fd);
}, false);