Webサイトでファイルの入力を受け取りたいとき、input要素のtype属性に"file"を指定することで実現できます。しかし、これだけではデフォルトのスタイルが適用されてしまい、サイト全体のイメージに合わせるのが難しくなります。そこで、この記事ではカスタマイズ可能な画像用のファイル送信フォームの例を紹介し、実装のためのヒントを解説していきます。 ✍️ 伊藤忠テクノソリューションズ株式会社 BUILDサービス部 ソフトウェアエンジニア 板倉翔太 概要Reactを使用する (ただし考え方は Vanilla JS でも使えます) TypeScriptを使用する(ただし考え方はJavaScriptでも使えます) react-hook-formに対応する 「カメラを使用」と「ファイル選択」のボタンを分ける 「カメラを使用」はモバイル端末のみで有効にする ファイル名を表示する 画像のプレビューを表示
![Reactで画像入力フォームをカスタマイズする(react-hook-form対応)|CTC Buildサービスチーム](https://cdn-ak-scissors.b.st-hatena.com/image/square/c2189eaf84f7556caea978a1d3b39b8f8af184b3/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F106986226%2Frectangle_large_type_2_713a8bf3150f3d1104e69614e3e84ff5.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280)