FileInput

Composant de saisie de fichier avec prise en charge de plusieurs fichiers, filtrage de type de fichier et divers styles.

Importation

import { FileInput } from 'asterui'

Exemples

FileInput de base

Saisie de fichier simple.

</>

import { FileInput } from 'asterui'

function App() {
  return (
      <FileInput />
    )
}

export default App

Types acceptés

Saisie de fichier qui accepte uniquement des types de fichiers spécifiques.

</>

Images only

PDF files only

Images and PDFs

import { FileInput, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="md">
        <div>
          <label className="block text-sm font-medium mb-2">Images only</label>
          <FileInput accept="image/*" />
        </div>
        <div>
          <label className="block text-sm font-medium mb-2">PDF files only</label>
          <FileInput accept=".pdf" />
        </div>
        <div>
          <label className="block text-sm font-medium mb-2">Images and PDFs</label>
          <FileInput accept="image/*,.pdf" />
        </div>
      </Space>
    )
}

export default App

Fichiers multiples

Permettre la sélection de plusieurs fichiers.

</>

import { FileInput } from 'asterui'

function App() {
  return (
      <FileInput multiple />
    )
}

export default App

Tailles

Différentes tailles de saisie de fichier.

</>

import { FileInput, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="md">
        <FileInput size="xs" />
        <FileInput size="sm" />
        <FileInput size="md" />
        <FileInput size="lg" />
      </Space>
    )
}

export default App

Couleurs

Différentes variantes de couleur.

</>

import { FileInput, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="md">
        <FileInput color="primary" />
        <FileInput color="secondary" />
        <FileInput color="accent" />
        <FileInput color="success" />
        <FileInput color="warning" />
        <FileInput color="error" />
      </Space>
    )
}

export default App

Styles

Styles avec bordure et fantôme.

</>

import { FileInput, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="md">
        <FileInput bordered color="primary" />
        <FileInput ghost color="secondary" />
      </Space>
    )
}

export default App

API

FileInput

Propriété	Description	Type	Défaut
accept	Types de fichiers à accepter	string	-
multiple	Autoriser la sélection de plusieurs fichiers	boolean	false
onChange	Gestionnaire de changement	(e: ChangeEvent) => void	-
disabled	Désactiver le champ	boolean	false
size	Taille du champ	'xs' | 'sm' | 'md' | 'lg'	'md'
color	Couleur du champ	'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	-
bordered	Afficher la bordure	boolean	false
ghost	Style fantôme	boolean	false
className	Classes CSS supplémentaires	string	-
data-testid	ID de test pour les tests	string	-

Accessibilité

• Utilise <input type="file"> natif pour une prise en charge complète du clavier
• Toujours associer avec un <label> descriptif pour l’accessibilité
• L’attribut accept aide les utilisateurs à sélectionner les fichiers appropriés