一般社団法人 全国個人事業主支援協会

COLUMN コラム

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

 

【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/

  
The following two tabs change content below.

内田 美樹

システムエンジニアをしています。 フロントエンドを主に、サーバーサイドも書いたりします。 JS/TS/Python/Javaは少しだけ React/Angular/Next/Nuxt/Vue/Nodeなんかを使ったりします。

この記事をシェアする

  • Twitterでシェア
  • Facebookでシェア
  • LINEでシェア