FileReader

FileReader

• FilerReader 오브젝트는 컴퓨터에 있는 사용자의 파일들(또는 raw data buffer)를 웹앱이 '비'동기적으로 읽을 수 있도록 한다!
• "File" 또는 "Blob" 객체는 읽으려고 하는 파일(또는 데이터)을 명시하는데 사용한다.
• 파일 오브젝트는 "FileList"오브젝트로부터 획득할 수 있음!
• input 태그, 드래그앤드롭 DataTransfer 오브젝트, HTMLCanvasElement의 mozGetAsFile() API의 결과로써 FileList를 돌려준다.

File

• file 오브젝트는 "blob"이라는 특별한 종류의 오브젝트!
• "blob"이 할 수 있는 모든 context에서 file 오브젝트는 사용될 수 있음
• blob > file
• 특히, "FileReader", "URL.createObjectURL()", "createImageBitmap()", "XMLHttpRequest.send()" 모두는! "Blob"과 "File"모두 허용함!

<input type="file">

Reference

• https://developer.mozilla.org/en-US/docs/Web/API/FileReader
• https://developer.mozilla.org/en-US/docs/Web/API/File
• https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications
• https://bezkoder.com/react-hooks-file-upload/
• https://binobose.medium.com/implementing-a-file-upload-status-progressbar-with-axios-onuploadprogress-using-react-hooks-3d653e6c1260