Upload

Composant de téléchargement de fichiers avec prise en charge du glisser-déposer.

Importation

import { Upload } from 'asterui'

Exemples

Upload basique

Téléchargement de fichiers simple avec bouton déclencheur.

</>

import { Upload, Button } from 'asterui'

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

export default App

Glisser-déposer

Glissez des fichiers vers la zone de téléchargement.

</>

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

Carte image

Afficher les images téléchargées sous forme de cartes.

</>

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 contrôlé

Contrôler la liste de fichiers avec l'état et une requête personnalisée.

</>

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

Taille maximale de fichier

Limiter la taille du fichier avec validation.

</>

import { Upload, Button } from 'asterui'

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

export default App

Types de fichiers acceptés

Restreindre les types de fichiers pouvant être téléchargés.

</>

import { Upload, Button } from 'asterui'

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

export default App

Dans un formulaire

Upload intégré au composant 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

Propriété	Description	Type	Défaut
fileList	Liste contrôlée des fichiers téléchargés	UploadFile[]	-
onChange	Callback lorsque la liste de fichiers change	({ fileList }) => void	-
customRequest	Gestionnaire de requête de téléchargement personnalisé	({ file, onSuccess, onError }) => void	-
listType	Style d’affichage de la liste de fichiers	'text' | 'picture' | 'picture-card'	'text'
maxCount	Nombre maximum de fichiers	number	-
maxSize	Taille maximale du fichier en octets	number	-
accept	Types de fichiers acceptés	string	-
disabled	Désactiver le téléchargement	boolean	false
children	Élément déclencheur de téléchargement	React.ReactNode	-
className	Classes CSS supplémentaires	string	-

Accessibilité

• L’entrée de fichier est correctement étiquetée
• La zone de glisser-déposer dispose d’une prise en charge du clavier
• La progression du téléchargement est annoncée aux lecteurs d’écran
• Les boutons de suppression sont accessibles au clavier