Upload

Componente de upload de arquivo com suporte a arrastar e soltar.

Importação

import { Upload } from 'asterui'

Exemplos

Upload Básico

Upload de arquivo simples com botão gatilho.

</>

import { Upload, Button } from 'asterui'

function App() {
  return (
      <Upload>
        <Button>Click to Upload</Button>
      </Upload>
    )
}

export default App

Arrastar e Soltar

Arraste arquivos para a área de upload.

</>

import { Upload } from 'asterui'

function App() {
  return (
      <Upload.Dragger>
        <p className="text-4xl mb-4">📁</p>
        <p className="text-lg">Click or drag file to this area to upload</p>
        <p className="text-sm opacity-60">Support for single or bulk upload</p>
      </Upload.Dragger>
    )
}

export default App

Cartão de Imagem

Exibe imagens enviadas como cartões.

</>

import { Upload } from 'asterui'
import { useState } from 'react'

function App() {
  interface UploadFile {
    uid: string
    name: string
    status?: 'uploading' | 'done' | 'error' | 'removed'
    url?: string
    thumbUrl?: string
    percent?: number
  }
  
  const [fileList, setFileList] = useState<UploadFile[]>([
    {
      uid: '-1',
      name: 'image1.png',
      status: 'done',
      url: 'https://picsum.photos/200',
    },
  ])
  
  return (
      <Upload
        listType="picture-card"
        fileList={fileList}
        onChange={({ fileList }) => setFileList(fileList)}
      >
        {fileList.length < 5 && (
          <div className="flex flex-col items-center">
            <span className="text-2xl">+</span>
            <span className="text-sm">Upload</span>
          </div>
        )}
      </Upload>
    )
}

export default App

Upload Controlado

Controle lista de arquivos com estado e requisição personalizada.

</>

import { Upload, Button } from 'asterui'
import { useState } from 'react'

function App() {
  interface UploadFile {
    uid: string
    name: string
    status?: 'uploading' | 'done' | 'error' | 'removed'
    url?: string
    thumbUrl?: string
    percent?: number
  }
  
  const [fileList, setFileList] = useState<UploadFile[]>([])
  
  const handleChange = ({ fileList }: { fileList: UploadFile[] }) => {
    setFileList(fileList)
  }
  
  const customRequest = ({ file, onSuccess }: { file: File; onSuccess: () => void }) => {
    // Simulate upload
    setTimeout(() => {
      onSuccess()
    }, 1000)
  }
  
  return (
      <div>
        <Upload
          fileList={fileList}
          onChange={handleChange}
          customRequest={customRequest}
          maxCount={3}
        >
          <Button>Upload (max 3)</Button>
        </Upload>
        <p>Files: {fileList.length}/3</p>
      </div>
    )
}

export default App

Tamanho Máximo de Arquivo

Limite tamanho do arquivo com validação.

</>

import { Upload, Button } from 'asterui'

function App() {
  return (
      <Upload maxSize={1024 * 1024 * 5}>
        <Button>Upload (max 5MB)</Button>
      </Upload>
    )
}

export default App

Tipos de Arquivo Aceitos

Restrinja tipos de arquivo que podem ser enviados.

</>

import { Upload, Button } from 'asterui'

function App() {
  return (
      <Upload accept="image/*">
        <Button>Upload Images Only</Button>
      </Upload>
    )
}

export default App

Em Formulário

Upload integrado com componente Form.

</>

import { Upload, Button, Form } from 'asterui'

function App() {
  const handleSubmit = (values: Record<string, unknown>) => {
    console.log(values)
  }
  
  return (
      <Form onFinish={handleSubmit}>
        <Form.Item
          name="avatar"
          label="Avatar"
          required
          rules={{
            required: 'Please upload an avatar',
          }}
        >
          <Upload listType="picture-card" maxCount={1}>
            <div className="flex flex-col items-center">
              <span className="text-2xl">+</span>
              <span className="text-sm">Upload</span>
            </div>
          </Upload>
        </Form.Item>
  
        <Form.Item name="documents" label="Documents">
          <Upload maxCount={5}>
            <Button>Upload Documents</Button>
          </Upload>
        </Form.Item>
  
        <Form.Item>
          <Button htmlType="submit" color="primary">
            Submit
          </Button>
        </Form.Item>
      </Form>
    )
}

export default App

API

Upload

Propriedade	Descrição	Tipo	Padrão
fileList	Lista controlada de arquivos enviados	UploadFile[]	-
onChange	Callback quando lista de arquivos muda	({ fileList }) => void	-
customRequest	Manipulador de requisição de upload personalizada	({ file, onSuccess, onError }) => void	-
listType	Estilo de exibição da lista de arquivos	'text' | 'picture' | 'picture-card'	'text'
maxCount	Número máximo de arquivos	number	-
maxSize	Tamanho máximo do arquivo em bytes	number	-
accept	Tipos de arquivo aceitos	string	-
disabled	Desabilitar o upload	boolean	false
children	Elemento gatilho de upload	React.ReactNode	-
className	Classes CSS adicionais	string	-

Acessibilidade

• Input de arquivo está corretamente rotulado
• Zona de arrastar e soltar tem suporte a teclado
• Progresso de upload é anunciado para leitores de tela
• Botões de remover são acessíveis por teclado