【Javascript × React × Typescript】フォームで画像をコピペ（コピー＆ペースト）でアップロードする方法

こんにちは！

今回は「Reactのフォームで画像をコピペ（コピー＆ペースト）でアップロードする方法」についてお伝えしたいと思います。

工数かかるかと思ったら意外と簡単にできたので共有いたします。
Typescriptを導入されている方も多いと思いますので、型宣言についても記述していきます。

Reactのフォームで画像をコピペ（コピー＆ペースト）でアップロードする方法

以下に具体例を用いて説明します。

const SampleComponent = () => {
  const [files, setFiles] = useState([]);
  // コピペした時の処理
  const handlePaste = async (pasteEvent: React.ClipboardEvent) => {
    const fileList = pasteEvent.clipboardData.items || [];
    const fileCount = fileList.length;
    if (fileList.length > 0 && fileList[0].kind !== 'file') return; // ファイル以外をペーストした場合は対象外
    pasteEvent.preventDefault(); // inputのvalueにファイル名が設定されないようにする
    if ((files.length + fileCount) > maxFileUpload) {
      alert(`一度にアップロードできるファイルは${maxFileUpload}個までです。`);
      return;
    }
    for (let i = 0; i < fileCount; i++) {
      const file = fileList[i].getAsFile() as File;
      const pattern = /^image\/(jpeg|png|gif)|^text.*$|^application.*$/;
      if (!file.type.match(pattern)) return; // 対象のファイル以外は添付しない
      const reader = new FileReader();
      // ファイルを読み込み終わったタイミングで実行するイベントハンドラー
      reader.onload = () => {
        //base64形式の画像データをfilesに格納
        if (typeof reader.result === 'string') {
          const base64 = reader.result.replace(/^data:\w+\/[a-zA-Z_0-9-.]+;base64,/, ''); // 接頭部は削除
          setFiles((prevFiles) => {
            return [...prevFiles, {name: file.name, base64}];
          });
        }
      }
      // ファイルを読み込む
      reader.readAsDataURL(file);
    }
  };
  return (
    <div className={styles.table__messageArea}>
      <textarea
        id='content'
        name='content'
        className={styles.table__message}
        placeholder={'画像をコピペしてください'}
        onPaste={handlePaste}
      />
    </div>
  );
};
export default SampleComponent;

こんな感じでコピペした画像をbase64で取得することができます！

以上、お疲れさまでした〜🍵