FileTrigger

Filuppladdning, filväljare

React Aria

FileTrigger från React Aria gör det möjligt för en användare att komma åt filsystemet via valfri tryckbar React Aria-komponent, som till exempel Button. Se API eller officiell dokumentation för hur den kan användas. FileTrigger är en komponent utan utseende och går att använda direkt från React Aria eller importeras från Midas.

import { Button, FileList, FileListItem, FileTrigger } from '@midas-ds/components'
import React from 'react'

export const FileListExample = () => {
  const [files, setFiles] = React.useState<File[]>([])

  const handleSelect = (e: FileList | null) => {
    const selected = e ? Array.from(e) : []
    setFiles(prev => {
      const existingNames = new Set(prev.map(f => f.name))
      return [...prev, ...selected.filter(f => !existingNames.has(f.name))]
    })
  }

  const handleDelete = (name: string) => {
    setFiles(prev => prev.filter(f => f.name !== name))
  }

  return (
    <>
      <FileTrigger
        allowsMultiple
        onSelect={handleSelect}
      >
        <Button>Välj filer</Button>
      </FileTrigger>
      {files.length > 0 && (
        <FileList>
          {files.map(file => (
            <FileListItem
              key={file.name}
              fileName={file.name}
              fileSize={`${(file.size / 1024).toFixed(1)} KB`}
              onDelete={() => handleDelete(file.name)}
            />
          ))}
        </FileList>
      )}
    </>
  )
}

Se FileList för dokumentation av listkomponenten.

Varianter

Se API samt React Aria för samtliga möjligheter.

Drag & drop

Använd FileTrigger tillsammans med DropZone för att tillåta val av filer via drag & drop. DropZone är en generell yta för drag & drop och dokumenteras separat — se dess egen sida för tillstånd, validering och etikettering.

import { Button, DropZone, FileList, FileListItem, FileTrigger, Text } from '@midas-ds/components'
import { Upload } from 'lucide-react'
import React from 'react'
import { DropEvent, isFileDropItem } from 'react-aria'

export const DropZoneExample = () => {
  const [files, setFiles] = React.useState<File[]>([])

  const setUniqueFiles = (newFiles: File[]) => {
    setFiles(oldFiles => {
      const existingNames = new Set(oldFiles.map(f => f.name))
      return [...oldFiles, ...newFiles.filter(f => !existingNames.has(f.name))]
    })
  }

  const handleDrop = async (e: DropEvent) => {
    const fileItems = e.items.filter(isFileDropItem)
    const droppedFiles = await Promise.all(fileItems.map(item => item.getFile()))
    setUniqueFiles(droppedFiles)
  }

  const handleSelect = (e: FileList | null) => {
    const selectedFiles = e ? Array.from(e) : []
    setUniqueFiles(selectedFiles)
  }

  const handleDelete = (name: string) => {
    setFiles(prev => prev.filter(f => f.name !== name))
  }

  return (
    <>
      <DropZone
        onDrop={handleDrop}
        aria-label='Dra och släpp filer här'
      >
        <Text slot='label'>Dra och släpp filer här</Text>
        <FileTrigger
          allowsMultiple
          onSelect={handleSelect}
        >
          <Button variant='secondary'>
            <Upload aria-hidden size={20} />
            Välj fil
          </Button>
        </FileTrigger>
      </DropZone>
      {files.length > 0 && (
        <FileList style={{ marginTop: '1rem' }}>
          {files.map(file => (
            <FileListItem
              key={file.name}
              fileName={file.name}
              fileSize={`${(file.size / 1024).toFixed(1)} KB`}
              onDelete={() => handleDelete(file.name)}
            />
          ))}
        </FileList>
      )}
    </>
  )
}

Dra och släpp filer här

Alternativ

Använd allowsMultiple för att tillåta flera filer samtidigt, och acceptedFileTypes för att begränsa vilka filtyper som går att välja. Se DropZone: Validering för filtypsbegränsning som även gäller drag & drop.

Media Capture

På mobila enheter kan användaren använda enhetens kamera för att välja media. defaultCamera väljer vilken kamera som används.

<FileTrigger defaultCamera={'environment'}>
  <Button>Öppna kameran</Button>
</FileTrigger>

API

FileTrigger

Name	Type	Default	Description
acceptedFileTypes	readonly string[]	-	Specifies what mime type of files are allowed.
allowsMultiple	boolean	-	Whether multiple files can be selected.
defaultCamera	"environment" | "user"	-	Specifies the use of a media capture mechanism to capture the media on the spot.
children	ReactNode	-	The children of the component.
acceptDirectory	boolean	-	Enables the selection of directories instead of individual files.