Skip to content
Home

Upload

Info
Demos
Properties
Events

Demos

Upload (default)

Last opp dokumenter

Dra & slipp eller velg hvilke filer du vil laste opp.

Tillatte filformater:
JPG, PNG
Maks filstørrelse:
5 MB
Code Editor
<Upload acceptedFileTypes={['jpg', 'png']} id="upload-basic" />

'useUpload' React Hook

By using the Upload.useUpload you can remove or add files or the status displayed in the component.

You can also use the file blob in combination with the FileReader API.

Last opp dokumenter

Dra & slipp eller velg hvilke filer du vil laste opp.

Tillatte filformater:
JPG, PNG
Maks filstørrelse:
5 MB
Code Editor
const Component = () => {
  const { files, setFiles } = Upload.useUpload('upload-remove-files')
  return (
    <>
      <Upload
        acceptedFileTypes={['jpg', 'png']}
        id="upload-remove-files"
      />

      <Button
        top="small"
        disabled={files.length < 1}
        onClick={() => setFiles([])}
      >
        Remove selected files
      </Button>

      <Preview files={files} />
    </>
  )
  function Preview({ files }) {
    const [images, setImages] = React.useState([])
    React.useEffect(() => {
      files.map(({ file }) => {
        let reader = new FileReader()
        reader.addEventListener(
          'load',
          (event) => {
            images.push({
              blob: event.target,
              file,
            })
            setImages([...images])
            reader = null
          },
          false,
        )
        reader.readAsDataURL(file)
      })
    }, [files])
    return (
      <Section aria-label="List of chosen images">
        {images.map((img, i) => (
          <Img
            top
            key={i}
            src={img.blob.result}
            alt={img.file.name}
            height={100}
          />
        ))}
      </Section>
    )
  }
}
render(<Component />)

Upload single file/fixed amount of files

Last opp dokumenter

Dra & slipp eller velg hvilken fil du vil laste opp.

Tillatte filformater:
JPG, PNG
Maks filstørrelse:
5 MB
Maks antall filer:
1
Code Editor
const Component = () => {
  const { files, setFiles } = Upload.useUpload('upload-single-file')
  if (files.length) {
    console.log('files', files, setFiles)
  }
  return (
    <Upload
      acceptedFileTypes={['jpg', 'png']}
      id="upload-single-file"
      filesAmountLimit={1}
    />
  )
}
render(<Component />)

Upload loading state

When uploading the file you can set the loading state of the request using the Upload.useUpload hook and passing isLoading to the file that is being uploaded.

Last opp dokumenter

Dra & slipp eller velg hvilke filer du vil laste opp.

Tillatte filformater:
JPG, PNG
Maks filstørrelse:
5 MB
Code Editor
const Component = () => {
  const { files, setFiles } = Upload.useUpload('upload-is-loading')
  useMockFiles(setFiles, {
    isLoading: true,
  })
  return (
    <>
      <Upload acceptedFileTypes={['jpg', 'png']} id="upload-is-loading" />
      <ToggleButton
        top="small"
        disabled={files.length < 1}
        on_change={({ checked }) =>
          setFiles(
            files.map((fileItem) => {
              return {
                ...fileItem,
                isLoading: checked,
              }
            }),
          )
        }
      >
        Files is loading toggle
      </ToggleButton>
    </>
  )
}
render(<Component />)

Upload error message

The only file verification the Upload component does is for the file size and the file type. These errors are handled by the HTML element input so they aren't selectable. If you want any other error messages you can use the Upload.useUpload hook the same way as with the loading state.

Last opp dokumenter

Dra & slipp eller velg hvilke filer du vil laste opp.

Tillatte filformater:
JPG, PNG
Maks filstørrelse:
5 MB
Code Editor
const Component = () => {
  const { files, setFiles } = Upload.useUpload('upload-error-message')
  return (
    <>
      <Upload
        acceptedFileTypes={['jpg', 'png']}
        id="upload-error-message"
      />
      <ToggleButton
        top="small"
        disabled={files.length < 1}
        on_change={({ checked }) => {
          setFiles(
            files.map((fileItem) => {
              return {
                ...fileItem,
                errorMessage: checked ? 'custom error message' : null,
              }
            }),
          )
        }}
      >
        Toggle error message
      </ToggleButton>
    </>
  )
}
render(<Component />)

Upload specific accepted file formats

You can pass the file formats as a string array. This will restrict which files that can be selected.

Last opp dokumenter

Dra & slipp eller velg hvilke filer du vil laste opp.

Tillatte filformater:
PNG, JPG, PDF
Maks filstørrelse:
5 MB
Code Editor
const Component = () => {
  const { files, setFiles } = Upload.useUpload('upload-accepted-formats')
  if (files.length) {
    console.log('files', files, setFiles)
  }
  return (
    <Upload
      acceptedFileTypes={['png', 'jpg', 'pdf']}
      id="upload-accepted-formats"
    />
  )
}
render(<Component />)

Upload with prefilled error

Last opp dokumenter

Dra & slipp eller velg hvilke filer du vil laste opp.

Tillatte filformater:
JPG, PNG
Maks filstørrelse:
5 MB
Code Editor
const Component = () => {
  const { files, setFiles } = Upload.useUpload('file-list')
  if (files.length) {
    console.log('files', files)
  }
  useMockFiles(setFiles, {
    errorMessage: 'This is no real file!',
  })
  return <Upload acceptedFileTypes={['jpg', 'png']} id="file-list" />
}
render(<Component />)