FileTrigger

Filuppladdning, filväljare

Storybook

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. DropZone har en enkelt stylad yta men med samma beteende som React Aria.

import { Button } from '@midas-ds/components'
import { FileTrigger } from 'react-aria-components'
import React from 'react'

export const Example = () => {
  let [file, setFile] = React.useState(null);

  return (
    <>
      <FileTrigger
        onSelect={(e) => {
          let files = e ? Array.from(e) : [];
          let filenames = files.map((file) => file.name);
          setFile(filenames);
        }}>
        <Button>Välj fil</Button>
      </FileTrigger>
      {file && file}
    </>
  )
}

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.

export const DropZoneExample = () => {
  let [files, setFiles] = React.useState(null);
  return (
    <>
      <DropZone
        onDrop={(e) => {
          let files = e.items.filter((file) =>
            file.kind === 'file'
          ) as FileDropItem[];
          let filenames = files.map((file) => file.name);
          setFiles(filenames.join(', '));
        }}
      >
        <FileTrigger
          allowsMultiple
          onSelect={(e) => {
            let files = Array.from(e);
            let filenames = files.map((file) => file.name);
            setFiles(filenames.join(', '));
          }}
        >
          <Button>Select files</Button>
        </FileTrigger>
        <Text slot="label" style={{ display: 'block' }}>
          {files || 'Drop files here'}
        </Text>
      </DropZone>
    </>
  )
}

Drop files here

Alternativ

För att tillåta användaren att ladda upp flera filer på samma gång, använd attributet allowsMultiple, för att begränsa valbara filtyper, använd acceptedFileTypes.

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	string[]	-	Specifies what mime type of files are allowed.
allowsMultiple	boolean	-	Whether multiple files can be selected.
defaultCamera	"user" | "environment"	-	Specifies the use of a media capture mechanism to capture the media on the spot.
children	ReactNode | ((values: DisclosureGroupRenderProps & { defaultChildren: ReactNode; }) => ReactNode)	-	The children of the component. A function may be provided to alter the children based on component state.
acceptDirectory	boolean	-	Enables the selection of directories instead of individual files.

DropZone

Name	Type	Default	Description
isDisabled	boolean	-	Whether the drop target is disabled. If true, the drop target will not accept any drops.
getDropOperation	(types: DragTypes, allowedOperations: DropOperation[]) => DropOperation	-	A function returning the drop operation to be performed when items matching the given types are dropped on the drop target.
children	ReactNode | ((values: DisclosureGroupRenderProps & { defaultChildren: ReactNode; }) => ReactNode)	-	The children of the component. A function may be provided to alter the children based on component state.
className	string | ((values: DisclosureRenderProps & { defaultClassName: string; }) => string)	-	The CSS className for the element. A function may be provided to compute the class based on component state.
style	CSSProperties | ((values: DisclosureRenderProps & { defaultStyle: CSSProperties; }) => CSSProperties)	-	The inline style for the element. A function may be provided to compute the style based on component state.
slot	string	-	A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.