ファイルアップロード

React Router アプリケーションでファイルアップロードを処理する方法について説明します。このガイドでは、ファイルアップロードをより簡単にするために、Remix The Web プロジェクトのいくつかのパッケージを使用します。

このドキュメントのベースとなったオリジナルのガイドを執筆してくれた David Adams に感謝します。さらに多くの例については、そちらを参照してください。

基本的なファイルアップロード

1. いくつかのルートを設定する

ルートは自由に設定できます。この例では、次の構造を使用します。

import {
  type RouteConfig,
  route,
} from "@react-router/dev/routes";

export default [
  // ... other routes
  route("user/:id", "pages/user-profile.tsx", [
    route("avatar", "api/upload-avatar.tsx"),
  ]),
] satisfies RouteConfig;

2. フォームデータパーサーを追加する

form-data-parser は、ファイルアップロードを処理するためのストリーミングサポートを提供する request.formData() のラッパーです。

npm i @mjackson/form-data-parser

詳細については、form-data-parser のドキュメントを参照してください。

3. アップロードアクション付きのルートを作成する

parseFormData 関数は、引数として uploadHandler 関数を受け取ります。この関数は、フォーム内のファイルアップロードごとに呼び出されます。

ファイルアップロードを機能させるには、フォームの enctype を multipart/form-data に設定する必要があります。

import {
  type FileUpload,
  parseFormData,
} from "@mjackson/form-data-parser";

export async function action({
  request,
}: ActionFunctionArgs) {
  const uploadHandler = async (fileUpload: FileUpload) => {
    if (fileUpload.fieldName === "avatar") {
      // process the upload and return a File
    }
  };

  const formData = await parseFormData(
    request,
    uploadHandler
  );
  // 'avatar' has already been processed at this point
  const file = formData.get("avatar");
}

export default function Component() {
  return (
    <form method="post" encType="multipart/form-data">
      <input type="file" name="avatar" />
      <button>Submit</button>
    </form>
  );
}

ローカルストレージの実装

1. ストレージパッケージを追加する

file-storage は、JavaScript で File オブジェクトを保存するためのキー/値インターフェースです。localStorage がブラウザで文字列のキー/値ペアを保存できるのと同様に、file-storage を使用すると、サーバー上のファイルのキー/値ペアを保存できます。

npm i @mjackson/file-storage

詳細については、file-storage のドキュメントを参照してください。

2. ストレージ構成を作成する

異なるルートで使用される LocalFileStorage インスタンスをエクスポートするファイルを作成します。

import { LocalFileStorage } from "@mjackson/file-storage/local";

export const fileStorage = new LocalFileStorage(
  "./uploads/avatars"
);

export function getStorageKey(userId: string) {
  return `user-${userId}-avatar`;
}

3. アップロードハンドラーを実装する

fileStorage インスタンスにファイルを保存するように、フォームの action を更新します。

import {
  FileUpload,
  parseFormData,
} from "@mjackson/form-data-parser";
import {
  fileStorage,
  getStorageKey,
} from "~/avatar-storage.server";
import type { Route } from "./+types/user-profile";

export async function action({
  request,
  params,
}: Route.ActionArgs) {
  async function uploadHandler(fileUpload: FileUpload) {
    if (
      fileUpload.fieldName === "avatar" &&
      fileUpload.type.startsWith("image/")
    ) {
      let storageKey = getStorageKey(params.id);

      // FileUpload objects are not meant to stick around for very long (they are
      // streaming data from the request.body); store them as soon as possible.
      await fileStorage.set(storageKey, fileUpload);

      // Return a File for the FormData object. This is a LazyFile that knows how
      // to access the file's content if needed (using e.g. file.stream()) but
      // waits until it is requested to actually read anything.
      return fileStorage.get(storageKey);
    }
  }

  const formData = await parseFormData(
    request,
    uploadHandler
  );
}

export default function UserPage({
  actionData,
  params,
}: Route.ComponentProps) {
  return (
    <div>
      <h1>User {params.id}</h1>
      <form
        method="post"
        // The form's enctype must be set to "multipart/form-data" for file uploads
        encType="multipart/form-data"
      >
        <input type="file" name="avatar" accept="image/*" />
        <button>Submit</button>
      </form>

      <img
        src={`/user/${params.id}/avatar`}
        alt="user avatar"
      />
    </div>
  );
}

4. アップロードされたファイルを提供するためのルートを追加する

ファイルをレスポンスとしてストリーミングするリソースルートを作成します。

import {
  fileStorage,
  getStorageKey,
} from "~/avatar-storage.server";
import type { Route } from "./+types/upload-avatar";

export async function loader({ params }: Route.LoaderArgs) {
  const storageKey = getStorageKey(params.id);
  const file = await fileStorage.get(storageKey);

  if (!file) {
    throw new Response("User avatar not found", {
      status: 404,
    });
  }

  return new Response(file.stream(), {
    headers: {
      "Content-Type": file.type,
      "Content-Disposition": `attachment; filename=${file.name}`,
    },
  });
}