React.js Dropzone 라이브러리 사용하기

공식 문서 :

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

---

공식 문서를 기반으로 작성합니다.

라이브러리 설치

 

npm install --save react-dropzone
yarn add react-dropzone

 

or:

 

yarn add react-dropzone

 

기본 사용법( 훅스를 사용하는 방식으로 작성했습니다. )

 

import React, {useCallback} from 'react'
import {useDropzone} from 'react-dropzone'

function MyDropzone() {
  const onDrop = useCallback(acceptedFiles => {
    // Do something with the files
        console.log(acceptedFiles)
  }, [])
  const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop})


  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      {
        isDragActive ?
          <p>Drop the files here ...</p> :
          <p>Drag 'n' drop some files here, or click to select files</p>
      }
    </div>
  )
}

실행시켜보면 아래와 같이 화면이 나옵니다.

 

 

 

여기에 파일을 드래그하거나 문구에 포커스를 주고 스페이스바/엔터키를 누르거나, 문구를 클릭 하면 파일 업로드가 가능합니다.

 

isDragActive 를 통해 드래그를 이용해 파일을 올려놨을 때와 아닐 때를 설정할 수 있습니다.

{
        isDragActive ?
          <p>Drop the files here ...</p> :
          <p>Drag 'n' drop some files here, or click to select files</p>
      }

 

 

 

그리고

 

onDrop 이벤트핸들러에 console.log 를 찍어보면,

 

해당 파일이 어떻게 담기는지 확인 할 수 있습니다.

 

 

 

---

다양한 사용법

 

파일 업로드 막기

const {getRootProps, getInputProps} = useDropzone({ disabled: true });

예를 들면, 업로드 파일 개수를 정하고, 해당 개수를 넘어서면 disabled:true 를 통해 추가 업로드를 막을 수 있습니다.

 

클릭 업로드 막기

const {getRootProps, getInputProps} = useDropzone({ noClick: true });

드래그 또는 포커싱된 상태일 때 Space/Eneter 로 파일을 업로드할 수 있습니다.

 

키보드로 업로드 막기

const {getRootProps, getInputProps} = useDropzone({ noKeyboard: true });

드래그 또는 클릭으로만 업로드할 수 있습니다.

 

드래그 업로드 막기

const {getRootProps, getInputProps} = useDropzone({ noDrag: true });

 

 

Default로 드래그로만 업로드 하기

const {getRootProps} = useDropzone(); 

return ( 
<section className="container"> 
    <div {...getRootProps({className: 'dropzone'})}> 
        <p>Dropzone without click events</p> 
    </div> 
</section> 
)

getInputProps을 아예 빼버리면 드래그로만 업로드가 가능합니다.

---

디자인 추가

 

antd 프레임워크를 이용해서 icon 사용.

 

 

 

드래그해서 올려놨을 때

 

 

---

+ 22.05.29

드래그 & 드랍, 파일 업로드에 대한 hook을 직접 만들어서 배포해봤습니다. :) 

https://zih0.tistory.com/49

drag & drop 파일 커스텀 훅 제작