Usage

Import

import { Upload } from '@passfort/castle'
content_copy
Copy

Example

<Upload />
<Upload />
content_copy
Copy
live example

Multiple

<Upload multiple />
<Upload multiple />
content_copy
Copy
live example

Uploading

<Upload
  isUploading={true}
  files={[
    {
      name: 'File.pdf',
      size: 394029,
    },
  ]}
/>
<Upload
  isUploading={true}
  files={[
    {
      name: 'File.pdf',
      size: 394029,
    },
  ]}
/>
content_copy
Copy
live example

Uploaded

<Upload
  isUploaded={true}
  files={[
    {
      name: 'File.pdf',
      size: 394029,
    },
  ]}
/>
<Upload
  isUploaded={true}
  files={[
    {
      name: 'File.pdf',
      size: 394029,
    },
  ]}
/>
content_copy
Copy
live example

Event handlers

<Upload
  onChangeFiles={(files) => console.log('files', files)}
  isUploaded={true}
  files={[
    {
      name: 'File.png',
      size: 49029,
    },
    {
      name: 'File.pdf',
      size: 394029,
    },
  ]}
/>
<Upload
  onChangeFiles={(files) => console.log('files', files)}
  isUploaded={true}
  files={[
    {
      name: 'File.png',
      size: 49029,
    },
    {
      name: 'File.pdf',
      size: 394029,
    },
  ]}
/>
content_copy
Copy
live example

Controlled

use files prop to set files and onChangeFiles to handle file changes

function Example() {
  const [files, setFiles] = React.useState([])

  return (
    <Stack>
      <Upload
        files={files}
        onChangeFiles={(files) => setFiles(files)}
        isUploaded={true}
      />
      <Button label="clear" onClick={() => setFiles([])} />X
    </Stack>
  )
}
function Example() {
  const [files, setFiles] = React.useState([])

  return (
    <Stack>
      <Upload
        files={files}
        onChangeFiles={(files) => setFiles(files)}
        isUploaded={true}
      />
      <Button label="clear" onClick={() => setFiles([])} />X
    </Stack>
  )
}
content_copy
Copy
live example

Localisation

<Stack>
  <Upload placeholder="Custom placeholder" />
  <Upload multiple placeholder="Custom placeholder" />
</Stack>
<Stack>
  <Upload placeholder="Custom placeholder" />
  <Upload multiple placeholder="Custom placeholder" />
</Stack>
content_copy
Copy
live example