Flask 대용량 파일 업로드 구현

일반적인 파일 업로드 기능을 구현해서 사용하고 있는데, 가끔 대용량 파일 업로드 시에 문제가 발생한다. 그래서 Flask에서 사용할만한 예를 찾아보았는데... 아래와 같이 Flask와 Dropzone.js를 함께 사용하면 손쉽게 문제를 해결할 수 있다.

https://codecalamity.com/uploading-large-files-by-chunking-featuring-python-flask-and-dropzone-js/

Uploading large files by chunking - featuring Python Flask and Dropzone.js - Code Calamity

https://codecalamity.com/upload-large-files-fast-with-dropzone-js/

Upload large files fast with Dropzone.js - Code Calamity

 

문제는 Dropzone.js가 React를 지원하지 않는 듯하다. 백엔드와 테스트 HTML을 이용하여 백엔드 구현은 이미 끝났으나, React를 사용하는 프론트엔드에는 적용하지 못하고 있다. (희안한것은 위 예제에서 백엔드는 최신것, 프론트엔드는 예전것으로 하니 잘 동작한다)

https://www.dropzonejs.com/

Dropzone.js

jQuery에 의존하지 않는 Dropzone.js의 부트스트랩 테마가 있는듯 한데... React에 붙여서 파일 선택 및 업로드까지 성공하였으나, chunking 업로드는 포팅이 되지 않았다! 이왕 포팅한 김에 전체를 그대로 컨버팅했으면 얼마나 좋아 ㅠㅠ

https://www.dropzonejs.com/bootstrap.html

https://www.dropzonejs.com/bootstrap.html

 

GitLab의 최신 버전(5.7.2) dropzone.js 파일을 가져다가 약간 손을 보고 파일 선택 및 업로드를 해보니, 아니 이럴수가!! chunking에 의한 파일 업로드가 정상적으로 동작한다!

https://gitlab.com/meno/dropzone/-/blob/master/src/dropzone.js

src/dropzone.js · master · Matias Meno / Dropzone

 

처음에 Flask와 Dropzone에 대한 힌트는 다음 포스팅에서 얻었다.

https://stackoverflow.com/questions/44727052/handling-large-file-uploads-with-flask/53001103

Handling large file uploads with Flask

 

 

------------------------------

react-dropzone이라는 녀석이 있는듯한데, 이것은 어디까지나 드래그&드롭을 통한 파일 선택만 지원한다. 선택한 파일을 axios를 이용하여 업로드하는 것이 아닌가. 아마도 Dropzone.js 처럼 파일 업로드 기능 (chunking 유무 상관없이) 은 구현되지 않은 듯.

https://www.npmjs.com/package/react-dropzone

react-dropzone

https://github.com/react-dropzone/react-dropzone/

GitHub - react-dropzone/react-dropzone: Simple HTML5 drag-drop zone with React.js.

https://react-dropzone.js.org/

react-dropzone

 

이것도 Dropzone.js의 드래그&드롭을 이용한 파일 선택 기능만 React로 포팅하는 내용인듯.

https://www.laravelcode.com/post/how-to-upload-files-in-react-js-using-dropzone-js

How to Upload files in React Js using Dropzone Js