プログラミング フロントエンド

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

スポンサーリンク

こんにちは!

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

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

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

ポイント

Reactのinput要素にはonPastePropsがあり、貼り付けイベントをトリガーにすることができる

input, textareaタグのtype=fileと基本的な扱い方は同じでbase64を取得できる

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


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で取得することができます!

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

スポンサーリンク

-プログラミング, フロントエンド
-

© 2024 エンジニア×ライフハック Powered by AFFINGER5