フィールドで作られるFileオブジェクト

File オブジェクトは、ブラウザの File API によって提供されるデータ構造で、
ユーザーが <input type="file"> フィールドを通じて選択したファイルの情報を保持します。
つまり、File オブジェクトが生成されるのは、ユーザーがファイルを選択した場合のみです。

このオブジェクトは、ファイルの内容（バイナリデータ）に加えて、
ファイル名やサイズ、MIMEタイプなどのメタデータを扱うことができます。

`File` オブジェクトの概要

Fileオブジェクトの生成:
- 主に <input type="file"> フィールドから取得されます。
- JavaScriptでプログラム的に生成することも可能です。

特徴

読み取り可能なファイル情報:
- ファイル名（name）
- ファイルサイズ（size）
- ファイルのMIMEタイプ（type）
Blob を拡張したオブジェクト:
- File は Blob（バイナリデータを扱うオブジェクト）を拡張したものです。
- そのため、Blob のすべてのメソッドやプロパティを利用可能です。

主なプロパティと使用例

プロパティ一覧

プロパティ	説明	例
`name`	ファイル名（例: “example.png”）	`"image.jpg"`
`size`	ファイルサイズ（バイト単位）	`12345`
`type`	ファイルのMIMEタイプ（例: “image/png”）	`"image/png"`
`lastModified`	ファイルの最終更新日時（タイムスタンプ）	`1633026000000`

使用例: `<input type="file">` からのファイル取得

以下は、ユーザーが選択したファイルのプロパティをコンソールに表示する例です。

tsx

import React from "react";

const FileInfo: React.FC = () => {
  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (event.target.files && event.target.files.length > 0) {
      const file = event.target.files[0]; // 最初のファイルオブジェクトを取得
      console.log("ファイル名:", file.name);
      console.log("ファイルサイズ:", file.size, "バイト");
      console.log("MIMEタイプ:", file.type);
      console.log("最終更新日時:", new Date(file.lastModified));
    }
  };

  return <input type="file" onChange={handleFileChange} />;
};

export default FileInfo;

const file = event.target.files[0]; の file は Fileオブジェクト になります。

詳細説明

event.target.files は FileList オブジェクト で、これはユーザーが <input type="file"> を使用して選択したファイルのリストを保持します。
event.target.files[0] は、このリストから最初のファイルを取得します。この値は File オブジェクトで、ファイルに関する以下の情報を持っています：

実行結果（ファイル選択後、コンソール出力）

makefile

ファイル名: example.png
ファイルサイズ: 345678 バイト
MIMEタイプ: image/png
最終更新日時: Sat Oct 01 2023 15:30:00 GMT+0000

ファイル内容の操作方法

File オブジェクトの内容をプログラムで読み取る場合、FileReader API を使用します。
これにより、ファイルの中身を文字列やデータURLとして読み取ることが可能です。

使用例: FileReaderでファイルの中身を表示

以下は、画像ファイルをデータURLに変換し、プレビューとして表示する例です。

tsx

import React, { useState } from "react";

const FilePreview: React.FC = () => {
  const [imagePreview, setImagePreview] = useState<string | null>(null);

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (event.target.files && event.target.files.length > 0) {
      const file = event.target.files[0];

      // FileReaderを使用してファイルを読み取る
      const reader = new FileReader();
      reader.onload = () => {
        setImagePreview(reader.result as string); // 読み取ったデータを保存
      };
      reader.readAsDataURL(file); // データURLとして読み取る
    }
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      {imagePreview && <img src={imagePreview} alt="プレビュー" style={{ maxWidth: "300px" }} />}
    </div>
  );
};

export default FilePreview;

ファイルのプログラム生成

JavaScriptでは、File コンストラクタを使用してプログラム的に
ファイルを生成することもできます。

使用例: プログラムでファイルを生成

javascript

const content = new Blob(["Hello, world!"], { type: "text/plain" });
const file = new File([content], "example.txt", {
  type: "text/plain",
  lastModified: Date.now(),
});

console.log("ファイル名:", file.name); // "example.txt"
console.log("内容:", file); // Blobとしてのファイル内容

Fileオブジェクトを利用する場面

フォームのファイルアップロード:
- ユーザーが選択したファイルをサーバーに送信する
  （例: 画像やドキュメントのアップロード）。
画像のプレビュー:
- 選択した画像をクライアント側でプレビュー表示する。
プログラムでのファイル生成:
- ユーザーが入力したデータを基にファイルを作成し、
  ダウンロードリンクを提供する。
ドラッグ＆ドロップのファイル取得:
- ファイルをドラッグ＆ドロップで取得する。

まとめ

File オブジェクトは、選択されたファイルのメタデータ（名前、サイズ、タイプなど）
とその内容を扱うためのオブジェクト。
主に <input type="file"> から取得される。
FileReader を使ってファイル内容を読み取ったり、プログラム的に
ファイルを生成したりすることが可能。

これらを活用することで、さまざまなファイル操作が実現できます！

File オブジェクトの概要

特徴