React CrossUploader

Namo CrossUploader™의 React 지원 버전입니다.

React Support

react 및 react-dom 모듈이 설치되지 않았다면, 설치단계에서 react관련 의존 모듈 미설치에 관한 경고가 발생하게 됩니다. react 및 react-dom 설치 방법은 다음과 같습니다.

> npm install react react-dom --save

crossuploader-react 패키지는 react 16 버전 이상에서 테스트되었습니다. 이론적으로는 16이하의 버전에서도 호환이 되지만 충분히 테스트되지 않았음을 알려드립니다.

TypeScript Support

crossuploader-react 패키지는 타입스크립트를 지원합니다.

Install

React 환경에서 업로더 컴포넌트를 생성하기 위해, crossuploader-uploader 패키지를 아래의 방법과 같이 설치할 수 있습니다.

> npm install crosseuploader-react --save

--save 옵션을 활용하여 향후 의존 모듈을 재설치할 때에도 자동으로 설치하도록 권장합니다. 설치 후 package.json 파일에 다음과 같이 crossuploader-react 모듈이 추가됩니다.

{
  "depedencies": {
    "crossuploader-react": "^1.x.x",
  }
}

설치가 완료되었다면, CrossUploader를 임포트하여 사용을 할 수 있습니다.

import React, { useState } from 'react'
import { CrossUploader } from 'crossuploader-react';

export default function App() {
   const [uploader, setUploader] = useState(null);
   const managerProperties = {
    type : "upload",
    width : "924",
    height : "318",
    containerId : "uploaderContainer",
    uploadUrl : "/crossuploader/NamoCrossUploaderH5Samples/Samples/Upload/BasicFileUpload/UploadProcess.jsp"
  }

  const monitorProperties = {
    monitorLayerClass : "monitorLayer",
    monitorBgLayerClass : "monitorBgLayer",
    closeMonitorCheckBoxChecked : true
  }

  const onLoaded = (uploader) => {
    setUploader(uploader);
  }
  const deleteAllFiles = () => {
    if(uploader){
      uploader.fileUploadManager.deleteAllFiles();
    }
  }

  return (
    <section>
        <header>React Component-events Sample</header>
        <CrossUploader managerProperties={managerProperties} monitorProperties={monitorProperties} onLoaded={onLoaded}/>
    </section>
  )
}

크로스업로더의 다운로더를 적용하고 싶다면 아래와 같이 type을 통하여 지정할 수 있습니다. downloadUrl을 통해 다운로드 경로를 설정할 수 있습니다.

import React from 'react'
import { CrossUploader } from './lib/crossuploader/index'

const App = () => {
  const managerProperties = {
    type : "download",
    uiMode : "SINGLE",
    width : "924",
    height : "318",
    containerId : "downloaderContainer",
    downloadUrl : "/crossuploader/NamoCrossUploaderH5Samples/Samples/Download/MultipleFileDownload/DownloadProcess.jsp",
  }
  
  return (
    <>
        <section>
          <header>
            <h1>React CrossUploader</h1>
          </header>
          
          <CrossUploader
            managerProperties={managerProperties}
          />
        </section>
    </>
  )
}

export default App

Download CrossUploader Script

크로스업로더 스크립트는 별도로 제공되며 crossuploader-react에는 크로스업로더 스크립트 파일이 포함되어있지 않습니다. 크로스업로더 에 방문하여 크로스업로더 제품 체험판을 받아볼 수 있습니다. 관련 사항은 크로스업로더 제품내의 연동 안내 관련 문서를 참조하시길 바랍니다.

제공된 크로스업로더 스크립트는 설치할 프로젝트 폴더의 public 경로 안으로 설치할 수 있습니다. 관련 예시로는 아래와 같습니다.

Copy to the React public subdirectory.
ex) /example/basic/public/crossuploader

Documentation and Example

crossuploader-react의 사용 예제와 가이드를 제공합니다.

/example/README.md

Properties

ManagerProperties

width: string

(Optional)

height: string

(Optional)

containerId: string

(Required)

uploadUrl: string

(업로드 기능 사용시 - Required)

downloadUrl: string

(다운로드 기능 사용시 - Required)

uiMode: string

(Optional)

MonitorProperties

monitorLayerClass: string

(Required)

monitorBgLayerClass: string

(Required)

closeMonitorCheckBoxChecked?: boolean

(Optional)

크로스 업로더의 자세한 옵션은 개발자 매뉴얼의 Method는 API 안내의 API(Client) 항목을 참고하시기 바랍니다.