#Upload

#Import

import { Upload } from '@dnb/eufemia'

#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.
• The Upload component connects to the GlobalStatus and displays file error messages there as well.
• 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" />
}

#JPG vs JPEG

When jpg is defined (most commonly used), then the component will also accept jpeg files.

#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 property 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.

#The download property

Each file item is displayed as a clickable link with its original file name, which opens the file source in a new browser tab.

In some situations, it's more suitable to have each link download the file instead of opening it in a new browser tab. To achieve this, set the download={true} property on the Upload component.