[react-dropzone] - 비디오 업로드

react-dropzone
파일에 대한 HTML5 호환 드래그 앤 드롭 영역을 만드는 간단한 React hook
npm install react-dropzone --save

• 사용 예시

  • // the wrapper component for the hook
    
    import React from 'react';
    import Dropzone from 'react-dropzone';
    
    <Dropzone onDrop={acceptedFiles => console.log(acceptedFiles)}>
        {({getRootProps, getInputProps}) => (
            <section>
                <div {...getRootProps()}>
                    <input {...getInputProps()} />
                    <p>Drag 'n' drop some files here, or click to select files</p>
                </div>
            </section>
        )}
    </Dropzone>

  • [onDrop] acceptedFiles
    • 업로드된 파일에 대한 정보가 담긴다.
    • axios(또는 fetch)를 이용해 서버로 넘겨준 후 처리한다.
  • getRootProps
    • dropzone의 클릭, 드래그 등 각 종 이벤트에 대응하는 함수가 들어있다.
  • getInputProps
    • input에게 주는 속성 required등 정의
      
      
      
• 프로젝트 적용

  • import React, from 'react';
    import Dropzone from 'react-dropzone';
    
    
    
    <Dropzone onDrop={onDrop} multiple={false} maxSize={1000000000}>
        {({ getRootProps, getInputProps }) => (
            <div style={{ ... }} {...getRootProps()}>
                <input {...getInputProps()} />
            </div>
        )}
    </Dropzone>

  • onDrop
    • 서버에 전달한 부분들 처리.. => 게시글 확인
  • multiple
    • 한 개씩 업로드 한다.
  • maxSize

 

 

[참고]
https://darrengwon.tistory.com/560