Upload

"use client";

import { Upload } from "@/components/composed/upload/upload";

export function UploadDemo() {
  const handleSelect = (files: File[]) => {
    console.log("Selected files:", files);
  };

  const handleChange = (fileList: any[]) => {
    console.log("File list changed:", fileList);
  };

  return (
    <div className="w-full max-w-md space-y-6">
      <div>
        <h3 className="mb-2 text-sm font-medium">单文件上传</h3>
        <Upload
          buttonText="选择文件"
          onSelect={handleSelect}
          onChange={handleChange}
        />
      </div>

      <div>
        <h3 className="mb-2 text-sm font-medium">多文件上传</h3>
        <Upload
          multiple
          buttonText="选择多个文件"
          onSelect={handleSelect}
          onChange={handleChange}
        />
      </div>
    </div>
  );
}

"use client";

import { Upload } from "@/components/composed/upload/upload";

export function UploadDefault() {
  return (
    <div className="w-full max-w-md">
      <Upload />
    </div>
  );
}

"use client";

import { Upload } from "@/components/composed/upload/upload";

export function UploadDemo() {
  const handleSelect = (files: File[]) => {
    console.log("Selected files:", files);
  };

  const handleChange = (fileList: any[]) => {
    console.log("File list changed:", fileList);
  };

  return (
    <div className="w-full max-w-md space-y-6">
      <div>
        <h3 className="mb-2 text-sm font-medium">单文件上传</h3>
        <Upload
          buttonText="选择文件"
          onSelect={handleSelect}
          onChange={handleChange}
        />
      </div>

      <div>
        <h3 className="mb-2 text-sm font-medium">多文件上传</h3>
        <Upload
          multiple
          buttonText="选择多个文件"
          onSelect={handleSelect}
          onChange={handleChange}
        />
      </div>
    </div>
  );
}

"use client";

import {
  Upload,
  type UploadFile,
} from "@/components/composed/upload/upload";

export function UploadCustomRequest() {
  // 模拟上传请求
  const handleUpload = async (file: File): Promise<any> => {
    return new Promise((resolve, reject) => {
      // 模拟网络延迟
      setTimeout(() => {
        // 模拟随机成功/失败
        if (Math.random() > 0.3) {
          resolve({
            url: `https://example.com/files/${file.name}`,
            id: Math.random().toString(36).substr(2, 9),
          });
        } else {
          reject(new Error("网络错误，上传失败"));
        }
      }, 2000);
    });
  };

  const handleChange = (fileList: UploadFile[]) => {
    console.log("Current file list:", fileList);
  };

  return (
    <div className="w-full max-w-md">
      <Upload
        multiple
        buttonText="上传到服务器"
        customRequest={handleUpload}
        onChange={handleChange}
      />
    </div>
  );
}

"use client";

import { Upload } from "@/components/composed/upload/upload";

export function UploadRestrictions() {
  return (
    <div className="w-full max-w-md space-y-6">
      <div>
        <h3 className="mb-2 text-sm font-medium">只允许上传图片</h3>
        <p className="mb-3 text-xs text-[var(--Text-text-tertiary)]">
          {`accept="image/*"`}
        </p>
        <Upload accept="image/*" buttonText="选择图片" />
      </div>

      <div>
        <h3 className="mb-2 text-sm font-medium">文件大小限制（2MB）</h3>
        <p className="mb-3 text-xs text-[var(--Text-text-tertiary)]">
          maxSize=2MB
        </p>
        <Upload
          multiple
          maxSize={2 * 1024 * 1024}
          buttonText="选择文件（≤2MB）"
        />
      </div>

      <div>
        <h3 className="mb-2 text-sm font-medium">最多上传 3 个文件</h3>
        <p className="mb-3 text-xs text-[var(--Text-text-tertiary)]">
          maxCount=3
        </p>
        <Upload multiple maxCount={3} buttonText="选择文件（最多3个）" />
      </div>

      <div>
        <h3 className="mb-2 text-sm font-medium">
          只允许上传 PDF 和 Word 文档
        </h3>
        <p className="mb-3 text-xs text-[var(--Text-text-tertiary)]">
          {`accept=".pdf,.doc,.docx"`}
        </p>
        <Upload accept=".pdf,.doc,.docx" buttonText="选择文档" />
      </div>
    </div>
  );
}

"use client";

import * as React from "react";
import {
  Upload,
  type UploadFile,
} from "@/components/composed/upload/upload";

export function UploadControlled() {
  const [fileList, setFileList] = React.useState<UploadFile[]>([]);

  const handleChange = (newFileList: UploadFile[]) => {
    setFileList(newFileList);
  };

  const handleRemove = (file: UploadFile) => {
    console.log("Removing file:", file.name);
  };

  const handleClear = () => {
    setFileList([]);
  };

  return (
    <div className="w-full max-w-md space-y-4">
      <Upload
        fileList={fileList}
        multiple
        onChange={handleChange}
        onRemove={handleRemove}
      />

      <div className="flex items-center gap-4 text-sm">
        <span className="text-[var(--Text-text-tertiary)]">
          已选择 {fileList.length} 个文件
        </span>
        {fileList.length > 0 && (
          <button
            onClick={handleClear}
            className="text-[var(--Text-text-brand)] hover:underline"
          >
            清空列表
          </button>
        )}
      </div>
    </div>
  );
}

"use client";

import { Upload } from "@/components/composed/upload/upload";

export function UploadDisabled() {
  return (
    <div className="w-full max-w-md">
      <Upload disabled buttonText="上传已禁用" />
    </div>
  );
}