Reactでファイル選択ダイアログからファイル取り込み【ライブラリ】

Reactでファイル選択ダイアログ 

react-file-input-previews-base64　というライブラリで簡単にファイル選択ダイアログを実装することができます。

Just a moment...

www.npmjs.com

このライブラリはコンポーネントの形になっており、これをページに埋め込むだけでファイル選択ダイアログを実装できます。

ライブラリをインストール

下記コマンドでライブラリをインストールします。

$ npm install --save react-file-input-previews-base64

選択ダイアログコンポーネントの埋め込み

下のような感じでコンポーネントを埋め込みます。

import FileInputComponent from 'react-file-input-previews-base64'

class SampleComponent extends Component {
  render() {
    return (
      <div>
        <FileInputComponent
          parentStyle={{}} //スタイル
          imagePreview={true} //ファイルのプレビュー
          multiple={false} //複数ファイル選択
          callbackFunction={file => { //選択後のコールバック関数
            console.log(file)
          }}
          buttonComponent={ //クリック時に選択ダイアログを開くコンポーネント
            <button/>
          }
          accept="image/*" //許可するファイルのtype
        />
      </div>
    )
  }
}

それぞれの属性で指定できること

imagePreview：ファイルのプレビューは、選択されたファイルを画面上にプレビューします。必要ない場合はfalseを指定します。

multiple：multipleにtrueを指定すると、複数ファイルの選択ができます。この場合、後述するcallbackFunctionに渡ってくる引数が選択されたファイルの配列になります。

callbackFunction：callbackFunctionには、ファイルが選択された後のコールバック関数を指定します。先ほどのmultipleでtrueを指定した場合はファイルが配列で、falseを指定した場合は単一のファイルオブジェクトが引数に渡されます。multipleの指定によって引数の形が変わるので注意が必要です。

buttonComponent：buttonComponentには、クリックで選択ダイアログが立ち上がるコンポーネントを指定します。通常はボタン要素などを指定するかと思います。imageタグなんかを指定して画像クリックで選択ダイアログを立ち上げたりもできます。

accept：acceptには許可するファイルtypeの文字列を指定します。上のコード例では画像ファイルのみを許可しています。

指定できる属性はこの他にもあります。

ファイルオブジェクトの形式

読み込まれたファイルオブジェクトは下記のような形です。

{
  name: "IMG_20160813_102226.jpg",
  type: "image/jpeg",
  size: 645,
  base64: "data:image/jpeg;base64,/9j/4SzyRXhpZgAATU0AKgA...",
  file: File
}

ファイルはbase64として読み込まれます。

ライブラリの詳細については、下記の公式ページを参照してください。

Just a moment...

www.npmjs.com