画像をアップロードします

使用技術:reactjs、Google firebase、セマンティックUI反応

話題

-状態
-非同期リクエスト
-エラー処理
-ファイルのアップロード(このチュートリアルのイメージ)
-意味UIからのカスタムコンポーネントは、時間を節約するために反応する
目的は、ユーザーがGoogle Firebaseにイメージファイルをアップロードし、アップロードの進行状況を表示できるようにするコードを書くことです.
時間を節約するためにセマンティックUI反応からカスタムコンポーネントを使用します.

ステップ1〜セットアップコンポーネント

ファイルのアップロードと送信ボタンのフィールドを持つフォームを含む単純なクラスコンポーネントから開始します.

import React from "react";
import { 
  Form, 
  Button, 
} from 'semantic-ui-react';

class ExampleForm extends React.Component {
    state = {
      file: null,
      errors: [],
      uploadState: null
    };

    render () {
      return (
        <Form onSubmit={this.handleSubmit}> 
          <Input
              onChange={this.addFile}
              disabled={uploadState === 'uploading'}
              name="file"
              type="file"
           />
         <Button>Post</Button>
        </Form>
      );
    };
}

export default ExampleForm;

' file 'という名前の変数をnullに設定し、入力に対してaddfile ()関数を構築し、次に' file 'でユーザが選択したファイルを保存します.
また、ファイルがアップロードされているときにファイル選択を無効にしたいので、UploadState値を状態に追加し、アップロード状態が「アップロード」に等しいときに、入力に無効なプロパティを設定します.
その後、handlesubmit ()関数も構築します.
状態のエラー配列はエラーを追跡する任意の方法です.使用するために以下のアップロードファイル機能を見てください.

ステップ2 ~ addfile ()

addfile関数を構築する

addFile = event => {
  const file = event.target.files[0];
  if (file) {
    this.setState({ file });
  }
};

イベントオブジェクトをaddfile関数に渡すことにより、添付ファイルにアクセスできます.ユーザーが入力をクリックするのを選ぶイメージは、最初のインデックスに格納されます.この値をとり、値' file 'の下で私たちの状態に保存します.

ステップ3 ~ check file type ()

ファイルを送る前に、ユーザーが実際にイメージファイルを選択したことを確認します.
正しいファイルタイプを確認するには、状態に新しい値を追加し、ISO認可関数をインポートし、「MIME型」ライブラリをインポートします.

state = {
  file: null,
  authorizedFileTypes: ['image/jpeg', 'image/png'],
  errors: []
}

import mime from 'mime-types';

isAuthorized = filename => this.state.authorized.includes(mime.lookup(filename))

IsCommitは、ファイルタイプがAuthorizedFileTypes配列の文字列の1つにマッチした場合にtrueを返します.

ステップ4 ~ uploadfile ()

一旦ファイルを確認すると、目的地にアップロードする機能が必要です.このチュートリアルでは、GoogleのFirebaseです.[ Firebaseにアプリケーションを接続する方法がわからない場合は、その方法についてのチュートリアルを書きました
以下のユニークなFirebase設定ファイルをインポートします.これは独自のFirebase設定をインポートする場所です.
最初のステップはFireBaseをインポートし、状態に我々のFireStoreのストレージの参照を追加することです.アップロードを追跡するには、percentuploadedという状態で値を追加し、0に設定します.

import firebase from 'path in dir to firebase.js';

// state will now look like this
state ={
  storageRef: firebase.storage().ref(), // ADD THIS LINE
  percentUploaded: 0, // ADD THIS LINE TOO
  uploadTask: null // ADD THIS LINE TOO, SEE BELOW
  file: null,
  uploadState: null,
  authorizedFileTypes: ['image/jpeg', 'image/png'],
  errors: []
}

もう一つは、状態に追加する必要がありますこれは私たちの進捗バーを後で動作するように取得することが重要です.我々は、タスクを保持したり、リスナーを付ける値を変更するキーを追加する必要があります.アップロードと呼び、NULLに設定します.
私はあなたに完了した関数を表示し、何が起こっているかを壊す.

// uuidv4() generates a unique id
import uuidv4 from 'uuid/v4';

uploadFile = (file) => {
    // location in storage you want to create/send file to
    const filePath = `trades/images/${uuidv4()}.jpg`;

    this.setState({
      uploadTask: this.state.storageRef.child(filePath).put(file)
    },
      () => {
        this.state.uploadTask.on(
          'state_changed', 
          snap => {
            const percentUploaded = Math.round((snap.bytesTransferred / snap.totalBytes) * 100);
            this.setState({ percentUploaded }); 
        },
          err => {
            console.error(err);
            this.setState({
              errors: this.state.errors.concat(err),
              uploadState: 'error',
              uploadTask: null
            });
          },
          () => {
            this.state.uploadTask.snapshot.ref.getDownloadURL().then(downloadUrl => {
              console.log('this is the image url', downloadUrl);
              this.setState({ uploadState: 'done' })
            })
            .catch(err => {
              console.error(err);
              this.setState({
                errors: this.state.errors.concat(err),
                uploadState: 'error',
                uploadTask: null
              })
            })
          }
        )
      }
    )
}

何が起こっているかを壊しましょう.

this.setState({
      uploadTask: this.state.storageRef.child(filePath).put(file)
    },
      () => {
        this.state.uploadTask.on(
          'state_changed', 
          snap => {
            const percentUploaded = Math.round((snap.bytesTransferred / snap.totalBytes) * 100);
            this.setState({ percentUploaded }); 
        }

最初にUploadTaskの値を戻り値の値に設定します.puts ()この関数は、完了するまで常に更新されるタスクを返します.タスクはストレージに私たちのファイルの旅です.

リスナーを追加します.これはon ()です.状態.状態変更を待機するUploadTask.状態のこの値は常に変化していることを忘れないでください.put ()

私たちは、それが変わるたびに、UploadTaskで我々の価値のスナップショットへの接近を得ます.このスナップショットに関連付けられているいくつかのキーにアクセスすることで、我々はどのくらいのファイルを計算することができます数学で転送されている.ラウンド((スナップ. bytestransferred/snap . totalbytes)* 100)この値を状態内のpercentuploaded値に設定します.

err => {
            console.error(err);
            this.setState({
              errors: this.state.errors.concat(err),
              uploadState: 'error',
              uploadTask: null
            });
          },
          () => {
            this.state.uploadTask.snapshot.ref.getDownloadURL().then(downloadUrl => {
              console.log('this is the image url', downloadUrl);
              this.setState({ uploadState: 'done' })
            })
            .catch(err => {
              console.error(err);
              this.setState({
                errors: this.state.errors.concat(err),
                uploadState: 'error',
                uploadTask: null
              })
            })
          }
        )

次の行はエラーをチェックします.エラーが発生した場合はエラー配列を設定し、アップロードタスク/状態をリセットします.その後、アップロードされた画像にアクセスできます.今すぐアップロード状態を設定し、状態からファイルをクリアする良い時間です.その後、再度エラーをキャッチし、関数を終了できます.
我々は現在正常に我々のコンピュータからイメージを取って、Google Firestoreにそれを送りました.しかし、進捗バーはどうですか?

ステップファイブプログレスバー

独自のプログレスバーのコンポーネントを作成し、それをカスタマイズするためにセマンティックUI反応の進捗バーをインポートすることができます.最初のコンポーネントからプログレスバーに2つの値を渡します.

import React from 'react';
import { Progress } from 'semantic-ui-react';

const ProgressBar = ({ uploadState, percentUploaded }) => (
  uploadState === "uploading" && (
    <Progress 
      className="progress__bar"
      percent={percentUploaded}
      progress
      indicating
      size="medium"
      inverted
    />
  )
);

export default ProgressBar;

我々の主要なコンポーネントでは、このプログレスバーをインポートし、それをレンダリング関数に追加します.アップロードとprocentuploadedダウン小道具として渡すことを忘れないでください.

import ProgressBar from 'dir of progress bar';

<ProgressBar 
  uploadState={uploadState} 
  percentUploaded={percentUploaded}
/>

我々のファイルアップロードとして、我々は我々の進歩バーがいっぱいになるのを見ます.唯一のことは、我々のhandlesubmit機能でそれをすべて結びつけて、我々のコンポーネントの状態とリスナーをきれいにすることです.

ステップ6 - handlesubmit ()とコンポーネントをunmountする

handleSubmit = event => {
   uploadFile(this.state.file);
  };

componentWillUnmount() {
    if (this.state.uploadTask !== null) {
      this.state.uploadTask.cancel();
      this.setState({ uploadTask: null });
    }
  }

そこには、画像のアップロードと%をアップロードトラッカーがあります.私は、これがFirebaseで働いて、反応するのを援助することを望みます.

ボーナスエラー処理

我々が遭遇するかもしれないどんなエラーも扱う2つの機能を作ります.
最初に、我々のファイル入力要素に、我々がhandleinputerrorsと呼ばれる新しい機能を呼ぶことに等しいクラス名を与えてください.私たちのエラー配列をこの関数から渡し、'キーワード'を探します.

<Input
   className={this.handleInputError(errors,'file')}
   onChange={this.addFile}
   disabled={uploadState === 'uploading'}
   fluid
   label="File types: jpg, png"
   name="file"
   type="file"
/>

handleInputError = (errors, inputName) => {
    return errors.some(error => 
      error.message.toLowerCase().includes(inputName)
      )
        ? "error"
        : ""
  }

  displayErrors = errors => errors.map((error, i) => <p key={i}>{error.message}</p>);

最初の関数、HandleInputErrorは' file 'を扱う配列にエラーがあるかどうかを調べます.クラス名がエラーになると、それはユーザにその状態を反映するようにエラークラスレッドをスタイルできます.最後の関数DisplayErrorは、エラー配列をマップし、それぞれに関連付けられたメッセージを表示します.