はじめに

こんにちは、外資就活ドットコムの開発をやっている大平 (id:so_sky) です。

最近、業務の中でファイルアップロードのためのUIを実装する機会があったので、紹介します。

環境

弊社では、Next.js + TypeScript + Tailwind CSS を用いて外資就活ドットコムのフロントエンド開発を行っています。また、開発効率を向上させるためにUIライブラリとしてMantineを使用しています。今回は、Mantineを用いたファイルアップロードUIの実装方法についていくつかまとめます。

https://mantine.dev/

使用するコンポーネント

Dropzone

https://mantine.dev/x/dropzone/

ドラッグ&ドロップでファイルを入力することができるコンポーネントです。

実装例

以下にDropzoneを用いた実装例を記載します。具体的な処理やクラス指定などは省略してます。

<div>
  <Text>形式: 画像</Text>
  <Text>ファイル上限サイズ: 20MB</Text>
  <Dropzone
    onDrop={(files) => {
      // ファイル操作
    }}
    maxSize={20 * 1024 ** 2}  // <- データサイズ上限を指定できる
    accept={IMAGE_MIME_TYPE}  // <- 許容するファイルの拡張子を指定できる
  >
    <Group>
      <Dropzone.Accept>
        <div>
           {/* 成功時のアイコン */}
        </div>
      </Dropzone.Accept>
      <Dropzone.Reject>
        <div>
           {/* 失敗時のアイコン */}
        </div>
      </Dropzone.Reject>
      <Dropzone.Idle>
        <div>
          <div>
             {/* アイコン */}
            <Text>
              ファイルをドラッグ&ドロップ
            </Text>
          </div>
          <div>
            {isUpload ? (
              <div>
                <Text>
                  {uploadFile.name}
                </Text>
                <img
                  src={URL.createObjectURL(uploadFile)}
                  alt={uploadFile.name}
                />
              </div>
            ) : (
              <Text>
                ファイルが選択されていません
              </Text>
            )}
          </div>
        </div>
      </Dropzone.Idle>
    </Group>
  </Dropzone>
</div>