react-native-document-picker

부가 설명
파일 선택기
Tags
picker
file
활용한 네이티브 기능설치ios 링킹iCloud 접근 허용 ( 선택사항 )APIDocumentPicker.pick(options) DocumentPicker.pickMultiple(options)OptionsDocumentPicker.types.*예시파일 하나 선택멀티파일 선택
 

활용한 네이티브 기능

  • Apple's UIDocumentPickerViewController
  • Android's Intent.ACTION_GET_CONTENT
  • Windows Windows.Storage.Pickers

설치

npm i --save react-native-document-picker

OR

yarn add react-native-document-picker

ios 링킹

$ cd ios
$ pod install

iCloud 접근 허용 ( 선택사항 )

notion image

API

DocumentPicker.pick(options) DocumentPicker.pickMultiple(options)

Options

문서참조

DocumentPicker.types.*

DocumentPicker.types.* provides a few common types for use as type values, these types will use the correct format for each platform (MIME types on Android, UTIs on iOS).
types
 

예시

파일 하나 선택

import DocumentPicker from 'react-native-document-picker';

// Pick a single file
try {
  const res = await DocumentPicker.pick({
    type: [DocumentPicker.types.images],
  });
  console.log(
    res.uri,
    res.type, // mime type
    res.name,
    res.size
  );
} catch (err) {
  if (DocumentPicker.isCancel(err)) {
    // User cancelled the picker, exit any dialogs or menus and move on
  } else {
    throw err;
  }
}

멀티파일 선택

import DocumentPicker from 'react-native-document-picker';

// Pick multiple files
try {
  const results = await DocumentPicker.pickMultiple({
    type: [DocumentPicker.types.images],
  });
  for (const res of results) {
    console.log(
      res.uri,
      res.type, // mime type
      res.name,
      res.size
    );
  }
} catch (err) {
  if (DocumentPicker.isCancel(err)) {
    // User cancelled the picker, exit any dialogs or menus and move on
  } else {
    throw err;
  }
}