Upload

Componente de carga de archivos con soporte de arrastrar y soltar.

Importación

import { Upload } from 'asterui'

Ejemplos

Carga Básica

Carga de archivo simple con botón activador.

</>

import { Upload, Button } from 'asterui'

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

export default App

Arrastrar y Soltar

Arrastra archivos al área de carga.

</>

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

Tarjeta de Imagen

Muestra imágenes cargadas como tarjetas.

</>

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

Carga Controlada

Controla la lista de archivos con estado y solicitud 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

Tamaño Máximo de Archivo

Limita el tamaño del archivo con validación.

</>

import { Upload, Button } from 'asterui'

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

export default App

Tipos de Archivo Aceptados

Restringe los tipos de archivo que se pueden cargar.

</>

import { Upload, Button } from 'asterui'

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

export default App

En Formulario

Carga integrada con 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

Propiedad	Descripción	Tipo	Predeterminado
fileList	Lista controlada de archivos cargados	UploadFile[]	-
onChange	Callback cuando cambia la lista de archivos	({ fileList }) => void	-
customRequest	Manejador de solicitud de carga personalizada	({ file, onSuccess, onError }) => void	-
listType	Estilo de visualización de la lista de archivos	'text' | 'picture' | 'picture-card'	'text'
maxCount	Número máximo de archivos	number	-
maxSize	Tamaño máximo de archivo en bytes	number	-
accept	Tipos de archivo aceptados	string	-
disabled	Deshabilitar la carga	boolean	false
children	Elemento activador de carga	React.ReactNode	-
className	Clases CSS adicionales	string	-

Accesibilidad

• El input de archivo está correctamente etiquetado
• La zona de arrastrar y soltar tiene soporte de teclado
• El progreso de carga se anuncia a lectores de pantalla
• Los botones de eliminar son accesibles por teclado