Skip to content

react용 image upload component

아래는 react용 이미지 업로드 컴퍼넌트(많다)

  1. https://github.com/aleksei0807/react-images-uploader
    여러가지 CSS관련 설정을 제공한다.
    single과 multi가 분리되어 있다.
    AJAX가 내장되어 있어 사용하기 편하나 axios와 연결되지 않는다.

  2. https://github.com/jakehartnell/react-images-upload
    가장 심플하다. preview 기능을 제공한다.
    AJAX가 분리되어 있어 axios와 연결하기 편하다.

  3. https://github.com/Vanthink-UED/react-core-image-upload
    중국인 작품이다. 메뉴얼이 중국어로 되어 있어 패스
    여러 framework (jquery, vue, angular, react를 제공한다.)

  4. https://github.com/Xananax/react-image-file
    데모가 동작하지 않는다.

  5. https://github.com/mosliger/react-upload-image
    데모가 없다.

  6. https://github.com/corpix/material-ui-upload
    Material UI 사용

  7. https://github.com/transloadit/uppy
    여러기지 클라우드 지원 (구글 드라이브, 드롭박스, 인스타그램 등)
    깔끔한 UI, 그런데 조금 무거워 보인다.

  8. https://github.com/react-dropzone/react-dropzone
    깔끔한 UI 그런데 업로드한 파일을 삭제하는 기능을 찾지 못했다. (내가 못 찾은 것 같기는 한데…)

내가 찾는 조건

  • 파일 boundry 값과 base64 값을 제공해야한다.
  • ajax를 별도로 사용할 수 있어야 한다.
  • array를 지원해야 한다. (멀티 업로드 지원)
  • preview를 제공해야 한다.
  • 추가와 삭제가 편리해야 한다.

위 컴퍼넌트 중 1, 2, 7번중에 고민하다 2번을 선택했다.
1번은 CSS 수정하기가 어려워 보인다.
2번은 boundery 와 base64 정보를 따로 제공한다.
7번이 좋아보이는데 npm을 설치해 보니 너무 많은 라이브러리를 사용한다.

설정은 간단하다



import ImageUploader from 'react-images-upload';

onDrop = (pictureFiles, pictureBase64) => {
    // picutreFiles에 boundery 정보가 return 되고,
    // pictureBase64 에 base64 정보가 return 된다. 기본 array로 return

    this.setState({
        files: this.state.files.concat(pictureFiles),
    });
    // 여기에 ajax를 넣을 수 있다.
};
    
< ImageUploader
    withIcon={true}
    buttonText='이미지를 선택하세요'
    onChange={this.onDrop}
    imgExtension={['.jpg', '.gif', '.png', '.gif']}
    maxFileSize={5242880}
    withPreview={true}
/>

가장 심플하면서 꼭 필요한 기능은 다 들어가 있다.

Published inREACT