FileUploader Usage Guide

Overview

FileUploader is a reusable upload component that wraps the full flow: select file → upload with token → progress → callback.

• Location: src/common/components/file/FileUploader.tsx
• Stack: React (client) + axios + react-hot-toast + next-intl

Quick Start

import FileUploader from "@/common/components/file/FileUploader";
import {UPLOAD_URL} from "@/common/lib/Env";

<FileUploader
    url={UPLOAD_URL}
    uploadCallback={(url, fileName) => console.log(url, fileName)}
    uploadIcon={<button>Upload</button>}
    id="my-uploader"
/>

Environment Variables

The upload URL is configured via NEXT_PUBLIC_UPLOAD_URL, read from Env.ts.

Environment	Value
development	http://localhost:8888/upload.json
production	https://api.sparrowzoo.com/upload.json

The NEXT_PUBLIC_ prefix is required; Next.js only inlines prefixed vars to the client.

Props

Prop	Type	Required	Default	Description
url	string	Yes	-	Upload endpoint
uploadCallback	(url, fileName) => void	Yes	-	Success callback
uploadIcon	ReactNode	Yes	-	Trigger icon
id	string	Yes	-	Unique input id
pathType	string	No	"im"	Upload path type

Upload Flow

1. Click uploadIcon to open the file picker
2. Validate file (empty → toast "select-file")
3. Build FormData (file + pathType)
4. Get token from CrosStorage
5. axios POST with live progress
6. Check result.code (non-"0" → error toast)
7. On success, invoke uploadCallback
8. Reset uploading & progress

Result Type

interface Result {
    code: string;      // "0" means success
    message?: string;  // error message
    data: any;         // business data (file url etc.)
}

i18n

Key	zh	en
select-file	请选择文件	Please select a file
upload-success	上传成功	Upload successful
upload-failed	上传失败: {message}	Upload failed: {message}