Firebaseを使わずにブラウザ上でローカル画像をリサイズ【canvasのdrawImage()をReactで利用した方法】

FileReaderを使ってローカルにある画像をアップロードさせる機能の作り方を実装します。

この記事をベースにした別記事も用意しています
準備中：Firebaseを使わずにブラウザ上でローカル画像のサイズをリサイズする new Image() のcanvasを利用した方法

完成品

ソースコード：https://codesandbox.io/s/react-img-upload-e4q8s?file=/src/App.js

無駄な要素は極力はぶいた簡素なアップローダーにしました。

FileReaderを使って実装

imgUploader.jsx

import { useState } from "react";
import "./styles.css";

const App = () => {
  const [uploadImg, setUploadImg] = useState("");

  const handleUploadImg = (e) => {
    if (!e.currentTarget.files || e.currentTarget.files.length === 0) return;

    const fileReader = new FileReader();
    const file = e.currentTarget.files[0];
    if (file.type !== "image/jpeg" && file.type !== "image/png") return;

    fileReader.onloadend = () => {
      setUploadImg(fileReader.result);
    };
    fileReader.readAsDataURL(file);
  };

  return (
    <div className="App">
      <h1>React画像アップロード</h1>
      <input type="file" onChange={(e) => handleUploadImg(e)} />
      <div style={{ margin: "10px" }}>
        <img
          src={uploadImg}
          alt="アップロード画像"
          style={{ maxWidth: "200px" }}
        />
      </div>
    </div>
  );
};

export default App;

JSXエレメントの解説

省略
     <input type="file" onChange={(e) => handleUploadImg(e)} />
省略

上記のように input の属性 file に指定して onChange で画像を選ばれた後に関数が走るようにしておきます。

省略
        <img
          src={uploadImg}
          alt="アップロード画像"
          style={{ maxWidth: "200px" }}
        />
省略

src={} の中身には uploadImg の state を入れておきます。 state は onChange の中の関数（handleUploadImg）で変化させます。

handleUploadImgの解説

handleUploadImg.jsx

  const handleUploadImg = (e) => {
    if (!e.currentTarget.files || e.currentTarget.files.length === 0) return; //ファイルが存在しない状態ならそのまま離脱

    const fileReader = new FileReader();
    const file = e.currentTarget.files[0];

    if (file.type !== "image/jpeg" && file.type !== "image/png") return; //ファイル形式が jpeg, png 以外なら離脱

    fileReader.onloadend = () => {
      setUploadImg(fileReader.result); //resultの中にblob形式の画像データとして画像が格納されているのでそれをイメージ画像として読み込む
    };
    fileReader.readAsDataURL(file); //new FileReader()インスタンスの readAsDataURL() メソッドを使ってアップロードしたファイルをそのまま読み込ませて fireReader.onloadend を走らせ fileReader.result の中身を取り出す
  };

以上のように簡単に実装することができます。