inputで画像データの取り込み【React/TypeScript】

COLUMN コラム

2022年02月28日
inputで画像データの取り込み【React/TypeScript】
- プログラマー
- システムエンジニア

仕事で「アイコンを変更する」機能を実装した際に使用した手法をまとめておきます。

【HTML】
<div className="icon" onClick={onClick}>
  <img src="" alt="" id="preview"/>
</div>

【TypeScript】
const onClick = React.useCallback(() => {
 // インプットを作成
 const input = document.createElement('input');
 input.type = 'file';
 input.type = 'image/*'

 // 画像を選択した際の処理
 input.addEventListener('change', () => {
  const files = input?.files;
  if (files) {
   for (const file of files) {
    previewFile(file)
   }
  }
 })
 // 最後にinputをクリックしてあげる
 input.click();
}, []);

const previewFile = (file: File) => {
 // プレビュー画像を追加する要素を取得
 const preview = document.getElementById('preview') as HTMLImageElement;
 // TypeScriptはasでどのエレメントか指定してあげる必要がある

 const reader = new FileReader();
 reader.onload = function (e) { // URLとして読み込まれた際の処理
  const imageUrl = e.target.result; // URLはevent.target.resultで呼び出せる
  preview.src = imageUrl as string; // エレメントのsrcに直接urlを入れる
 } 
 // ファイルをURLとして読み込む
 reader.readAsDataURL(file);
};



参考：https://code-kitchen.dev/html/input-file/