Zodでアップロード時のMIMEファイルタイプを検証する方法

2023.08.04 に更新記事は 2 分で読めます
サムネイル画像

この記事では、ファイルアップロード時にTypeScriptとZodのバリデーションライブラリを使用してMIMEファイルタイプをバリデーションする方法を紹介します。
まず、Zodについて説明した後、具体的なバリデーション方法を解説します。

Zodとは?

Zodは、TypeScriptでデータ検証を行うためのスキーマ検証ライブラリです。TypeScriptの型システムを利用して、スキーマ定義とバリデーションを同時に行うことができます。これにより、コードの品質と堅牢性を向上させることができます。

ZodでMIMEタイプをバリデーションする方法

まず、Zodをプロジェクトにインストールします。

npm install zod

次に、以下のコードを使用して、ファイルアップロード時にMIMEタイプをバリデーションするスキーマを作成します。

import { z } from "zod";

const allowedMimeTypes = ["image/jpeg", "image/png"];

const fileSchema = z.custom<File>((file) => {
  if (!(file instanceof File)) {
    return false;
  }
  return allowedMimeTypes.includes(file.type);
}, {
  message: "アップロードしたファイルタイプが許可されていません",
});

const validateFile = (file: File): boolean => {
  const validationResult = fileSchema.safeParse(file);

  if (!validationResult.success) {
    console.error(validationResult.error);
    return false;
  }

  return true;
};

このコードでは、許可されたMIMEタイプを allowedMimeTypes 配列に定義しています。fileSchemaは、Zodの Custom schemas のFileを使って定義されており、Fileオブジェクトが適切なMIMEタイプを持っているかどうかをチェックします。

まとめ

この記事では、TypeScriptとZodライブラリを使ってファイルアップロード時にMIMEタイプをバリデーションする方法を紹介しました。
Zodを使用することで、型安全なバリデーションを実現し、アプリケーションの品質と堅牢性を向上させることができます。ファイルアップロード機能を持つアプリケーションを開発する際に、この方法を活用して、アップロードされるファイルのMIMEタイプを制限しましょう!

プロフィールアイコン

Syuu

フロントエンドが好きなWEBエンジニア Next.js / React / TypeScript

SHARE