Skip to content
Home

Upload

Info
Demos
Properties
Events

Description

The Upload component should be used in scenarios where the user has to upload any kind of files.

How to use the Upload component

  • Files selected by the user should be uploaded immediately (temporary location).
  • The user should be able to remove them (files) during the session.
  • If the Upload component is shown in a submit form, then a GlobalStatus should be a part of the form.
  • Validation messages coming from the "backend" should be displayed for each file via the useUpload hook. See example below.
  • The useUpload hook can be placed on any location in your application, and does not need to be where the Upload component is used.
function YourComponent() {
  const { files, setFiles } = Upload.useUpload('unique-id')


  React.useEffect(() => {
    setFiles(
      files.map((fileItem) => {
        if (fileItem.file.name === fileNameFromBackend) {
          fileItem.errorMessage = 'Your message from the backend'
        }
        return fileItem
      }),
    )
  }, [fileNameFromBackend])


  return <Upload id="unique-id" />
}

Backend integration

The "backend" receiving the files is decoupled and can be any existing or new system.

Limit the amount of files

By default, the Upload component accepts multiple files. You can use the prop filesAmountLimit={1} to make the component accept only one file.

Page wide drop support

Once the Upload component mounts, it also adds support for dropping files to the entire browser body.

NB: When you have several mounted components, only the first Upload component will receive the dropped files.

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.

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 />)

SyntaxError: Unexpected token (1:3)

Upload single file/fixed amount of files

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 />)

SyntaxError: Unexpected token (1:3)

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.

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 />)

SyntaxError: Unexpected token (1:3)

Upload error message

The only checks we do currently 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 the same way as with the loading state.

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 />)

SyntaxError: Unexpected token (1:3)

Upload specific accepted file formats

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

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 />)

SyntaxError: Unexpected token (1:3)

Upload with prefilled error

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 />)

SyntaxError: Unexpected token (1:3)