https://github.com/sarink/react-file-drop/blob/master/file-drop/src/FileDrop.tsx
라이브러리를 만든 코드를 살펴보니 이벤트 리스너와 state 만으로 만든
라이브러리보다 툴에 가까워보이고, 큰문제가 없어보여서 채택
사실 만들기 귀찮았다
거두절미하고 코드부터 보여주자면,
import React, { useState, useEffect, useContext } from "react"; // default hooks
import { FileDrop } from "react-file-drop";
import "./filedrop.css";
export type FileDropProps = {
onDrop: (files: FileList) => void;
onDragOver: (event: any) => void;
onDragLeave: (event: any) => void;
};
interface FinalFileDropProps extends FileDropProps {}
export const FileDropComp: React.FunctionComponent<FinalFileDropProps> = props => {
return (
<FileDrop
// onFrameDragEnter={(event) => console.log('onFrameDragEnter', event)}
// onFrameDragLeave={(event) => console.log('onFrameDragLeave', event)}
// onFrameDrop={(event) => console.log('onFrameDrop', event)}
onDragOver={event => {
console.log("onDragOver", event);
props.onDragOver(event);
}}
onDragLeave={event => {
console.log("onDragLeave", event);
props.onDragLeave(event);
}}
onDrop={(files, event) => {
console.log("onDrop!", files, event);
if (files) props.onDrop(files);
}}
>
{props.children}
</FileDrop>
);
};
onDrop, onDravOver, onDragLeave Props를 지원하는 래핑 컴포넌트를 만들어봤다.
./fildrop.css 는 스타일 조정하기위해 추가해둔 css 파일이다. 없어도됨