File API

요즘 대부분 웹사이트에서 파일을 업로드할 때 마우스로 원하는 파일을 끌어 놓는 드래그&드롭 기능을 지원한다. 리액트에선 React DnD 같은 라이브러리를 사용할 수도 있지만 HTML5에서 제공하는 드래그 드롭 API를 이용해서 직접 구현할 수 있다. 생각보다 어렵지도 않다. 기본 구조더보기export interface IFileTypes { id: number; object: File; // File 객체}const DragDrop = ( { /* ... */ },) => { const [isDragging, setIsDragging] = useState(false); const [files, setFiles] = useState([]); const fileId = useRef(0);..

file 타입의  태그와 File API를 이용해 컴퓨터에 저장된 이미지를 업로드할 수 있다. 이미지 태그 자체를 “파일선택” 버튼으로 기능하도록 할 수 있고, 라벨의 스타일을 수정하는 방식으로 “파일 선택”(파일 필드) 스타일을 변경할 수도 있다.  기본 구조업로드한 이미지는 컴포넌트 내부 상태(image)로 관리하고, 업로드 하기 전엔 기본 프로필 사진(fallbackUrl)을 표시하도록 한다.  태그의 type을 file로 명시하면 “파일 선택” 버튼이 표시된다. accept 속성엔 허용할 파일 유형을 .확장자 형태로 입력한다. 확장자는 대소문자를 구분하지 않는다. 여러 값을 입력할 땐 콤마 , 로 구분한다. 특정 타입(MIME 유형)의 모든 확장자를 허용하고 싶으면 타입/* 을 입력한다. 허용하지..