← カテゴリ一覧に戻る

ファイルアップロード

input type=file

type="file" はファイル選択ダイアログを開くコントロールです。accept で受け付けるファイル種別を絞り込み、multiple で複数選択を許可できます。 モバイルでは capture 属性でカメラを直接起動できます。

デモ: 基本的なファイル選択

<label htmlFor="file">ファイルを選択</label>
<input id="file" type="file" name="file" />

デモ: 画像のみ受け付ける（accept="image/*"）

accept="image/*" — 画像ファイルのみがダイアログに表示される

accept=".pdf,.doc,.docx" — 拡張子で指定

{/* MIME type で指定 */}
<input type="file" accept="image/*" />
<input type="file" accept="image/png,image/jpeg" />

{/* 拡張子で指定 */}
<input type="file" accept=".pdf,.doc,.docx" />

{/* 組み合わせ */}
<input type="file" accept="image/*,.pdf" />

デモ: 複数ファイル選択（multiple 属性）

Ctrl/Cmd+クリックまたはShift+クリックで複数選択可能

<input
  type="file"
  accept="image/*"
  multiple
/>

capture 属性（モバイルカメラ）

capture="environment" — 背面カメラ（書類・QRコード撮影など）

capture="user" — 前面カメラ（セルフィー、顔認証など）

{/* 背面カメラ（書類撮影、QRコード等） */}
<input type="file" accept="image/*" capture="environment" />

{/* 前面カメラ（セルフィー、顔認証等） */}
<input type="file" accept="image/*" capture="user" />

{/* 動画も撮影可能 */}
<input type="file" accept="video/*" capture="environment" />

File API によるプレビュー（JavaScript が必要）

選択されたファイルのプレビュー表示は File API を使用します。 これはブラウザの JavaScript API であり、React ではクライアントコンポーネント（"use client"）で実装します。

"use client";
import { useState } from "react";

export function ImagePreview() {
  const [preview, setPreview] = useState<string | null>(null);

  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0];
    if (file) {
      // FileReader でデータURLに変換
      const reader = new FileReader();
      reader.onload = (ev) => {
        setPreview(ev.target?.result as string);
      };
      reader.readAsDataURL(file);

      // または URL.createObjectURL を使う方法（より効率的）
      // setPreview(URL.createObjectURL(file));
    }
  }

  return (
    <>
      <input type="file" accept="image/*" onChange={handleChange} />
      {preview && <img src={preview} alt="プレビュー" />}
    </>
  );
}

accept の指定方法比較

指定方法例特徴
MIME type (汎用)image/*すべての画像形式を許可。ワイルドカード使用可
MIME type (特定)image/png, image/jpeg特定の形式のみ許可
拡張子.jpg, .png, .gif拡張子ベース。MIME type が正しくないファイルも通る
組み合わせimage/*, .pdfMIMEと拡張子を併用できる

注意: accept はダイアログのフィルターであり、バリデーションではありません。 サーバーサイドでも必ずファイル種別を検証してください。

Tips

  • accept はダイアログのフィルターにすぎない — サーバーサイドでも必ずMIME typeとファイルサイズを検証する
  • プレビューには URL.createObjectURL(file) が FileReader より高速だが、不要になったら URL.revokeObjectURL() でメモリを解放する
  • capture 属性はモバイル専用。デスクトップブラウザでは通常のファイル選択ダイアログになる
  • ドラッグ&ドロップによるファイル選択は、Drag and Drop API（dragover / drop イベント）で実装できる

🤖 AIプロンプトテンプレート

以下の要件を満たす、`<input type="file">` を使ったファイルアップロードUIのHTML・CSSサンプルを作成してください。

- `accept` 属性で受け入れるファイル形式（画像・PDF等）を制限すること
- `multiple` 属性を使った複数ファイル同時選択の例を含めること
- デフォルトの `<input>` を非表示にし、カスタムボタンで操作するCSSを実装すること
- ドラッグ＆ドロップエリアのUIデザイン（見た目のみ可）を実装すること
- ファイル名・サイズの表示エリアをUIとして含めること

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo