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

#Relevant links

• Figma
• Source code
• Docs code

#How to use the Upload component

• Files selected by the user should be uploaded immediately to a temporary location.
• The user should be able to remove files during the session.
• The Upload component connects to the GlobalStatus and displays file error messages there.
• Validation messages from the backend should be displayed for each file via the useUpload hook. See the example below.
• The useUpload hook can be placed in any location in your application, and does not need to be where the Upload component is used.

function YourComponent() {
  const myUploadId = 'unique-id' // or a function, object or React Context reference
  const { files, setFiles } = Upload.useUpload(myUploadId)

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

  return <Upload id={myUploadId} />
}

#useUpload hook

Exposes the following functionality:

• files: The given files of the Upload component.
• setFiles: A function to set the files of the Upload component.
• clearFiles: A function to clear the files of the Upload component. It can be useful when you want to programmatically clear the files of the Upload component at a given time.

#Variant compact

The compact variant displays less information than the normal variant and aims to display only what's necessary for the user to upload a file:

• Upload button
• List of uploaded files
• title as label (can be removed by providing the value false)
• text as sublabel (can be removed by providing the value false)

It does not display information about:

• filesAmountLimit
• fileMaxSize
• acceptedFileTypes

#JPG vs JPEG

When jpg is defined (most commonly used), 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.

#Prevents uploading duplicate files

By default, the Upload component prevents uploading duplicate files. It determines if a file is a duplicate if the file's name, size (if existing), and lastModified (if existing) values are equal. You can use the property allowDuplicates={true} to allow duplicate files.