Skip to content

Upload#

Info
Demos
Properties
Events

Demos#

Upload (default)#

Last opp dokumenter

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

Tillatte filer:
JPG, PNG
Maks filstørrelse:
5 MB
<Upload
  acceptedFileTypes={['jpg', 'png']}
  onChange={({ files }) => console.log('onChange', files)}
/>

Upload compact variant#

The compact variant shows the accepted file types and sizes when the user expands them.

<Upload
  variant="compact"
  acceptedFileTypes={['jpg', 'png']}
  onChange={({ files }) => console.log('onChange', files)}
/>

With a file max size based on file type, the expanded content shows a table.

<Upload
  variant="compact"
  acceptedFileTypes={[
    {
      fileType: 'jpg',
      fileMaxSize: 2,
    },
    {
      fileType: 'jpeg',
      fileMaxSize: 2,
    },
    {
      fileType: 'png',
      fileMaxSize: 2,
    },
    {
      fileType: 'bmp',
      fileMaxSize: 2,
    },
    {
      fileType: 'pdf',
      fileMaxSize: 10,
    },
    {
      fileType: 'doc',
      fileMaxSize: 10,
    },
  ]}
/>

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 og slipp eller velg hvilke filer du vil laste opp.

Tillatte filer:
JPG, PNG
Maks filstørrelse:
5 MB
const Component = () => {
  const myUploadId = 'unique-id' // or a function, object or React Context reference.
  const { files, setFiles } = Upload.useUpload(myUploadId) // id is needed when wanting to connect with the useUpload hook.

  return (
    <>
      <Upload acceptedFileTypes={['jpg', 'png']} id={myUploadId} />

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

      <Preview files={files} />
    </>
  )
  function Preview({ files }) {
    const [images, setImages] = useState([])
    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 og slipp eller velg hvilken fil du vil laste opp.

Tillatte filer:
JPG, PNG
Maks filstørrelse:
5 MB
Maks antall filer:
1
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 og slipp eller velg hvilke filer du vil laste opp.

Tillatte filer:
JPG, PNG
Maks filstørrelse:
5 MB
const Component = () => {
  const { files, setFiles } = Upload.useUpload('upload-is-loading')
  useEffect(() => {
    setFiles([
      {
        file: createMockFile('fileName.png', 123, 'image/png'),
        isLoading: true,
      },
    ])
  }, [])
  return (
    <>
      <Upload acceptedFileTypes={['jpg', 'png']} id="upload-is-loading" />
      <ToggleButton
        top="small"
        disabled={files.length < 1}
        onChange={({ 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 are not 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 og slipp eller velg hvilke filer du vil laste opp.

Tillatte filer:
JPG, PNG
Maks filstørrelse:
5 MB
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}
        onChange={({ 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 og slipp eller velg hvilke filer du vil laste opp.

Tillatte filer:
PNG, JPG, PDF
Maks filstørrelse:
5 MB
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 og slipp eller velg hvilke filer du vil laste opp.

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

Upload with file max size based on file type#

The table of accepted file types is sorted by maxFileSize, with the smallest first. File types without a max size come last. File types with the same maxFileSize are listed in the given order.

Last opp dokumenter

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

Tillatte filer og maks filstørrelse
Tillatte filer:Maks filstørrelse:
JPG, DOC, SVG, GIF1 MB
DOC, DOCX4 MB
TIFF, TIF5 MB
HTML, HTM6 MB
XLS, XLSX7 MB
ODT, PDF, ZIP99 MB
TEXT, TXT

To disable maxFileSize Use either 0 or false. If maxFileSize is not provided, it defaults to the value of Uploads fileMaxSize which defaults to 5 MB.

Last opp dokumenter

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

Tillatte filer og maks filstørrelse
Tillatte filer:Maks filstørrelse:
SVG5 MB
JPG, DOC
<Upload
  acceptedFileTypes={[
    {
      fileType: 'jpg',
      fileMaxSize: 0,
    },
    {
      fileType: 'doc',
      fileMaxSize: false,
    },
    {
      fileType: 'svg',
    },
  ]}
/>

Upload without file max size#

You can disable the file max size, which will deactivate all file size verifications in the Upload component. This can also be used to manually implement more complex file max size verifications.

Last opp dokumenter

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

Tillatte filer:
JPG, PDF
<Upload acceptedFileTypes={['jpg', 'pdf']} fileMaxSize={false} />

Upload without title and text#

Tillatte filer:
JPG, PNG
Maks filstørrelse:
5 MB
<Upload title={false} text={false} acceptedFileTypes={['jpg', 'png']} />

Upload with async onFileDelete#

Last opp dokumenter

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

Tillatte filer:
JPG, PNG
Maks filstørrelse:
5 MB
async function mockAsyncFileRemoval({ fileItem }) {
  const request = createRequest()
  console.log('making API request to remove:', fileItem.file.name)
  await request(3000) // Simulate a request
  const mockResponse = {
    successfulRemoval: Math.random() < 0.5, // Randomly fails to remove the file
  }

  if (!mockResponse.successfulRemoval) {
    throw new Error('Unable to remove this file')
  }
}
render(
  <Upload
    onFileDelete={mockAsyncFileRemoval}
    acceptedFileTypes={['jpg', 'png']}
  />
)

Upload with onFileClick#

Last opp dokumenter

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

Tillatte filer:
JPG, PNG
Maks filstørrelse:
5 MB
const Component = () => {
  const { setFiles } = Upload.useUpload('upload-on-file-click')
  useEffect(() => {
    setFiles([
      {
        file: createMockFile('1501870.jpg', 123, 'image/png'),
        id: '1',
        description: 'Click the file name to open the image',
      },
      {
        file: createMockFile(
          'file-name-that-is-very-long-and-has-letters.png',
          123,
          'image/png'
        ),
        id: '2',
      },
    ])
  }, [setFiles])
  async function mockAsyncFileFetching({ fileItem }) {
    const request = createRequest()
    console.log(
      'making API request to fetch the url of the file:',
      fileItem.file.name
    )
    await request(2000) // Simulate a request
    window.open(
      `https://eufemia.dnb.no/images/avatars/${fileItem.file.name}`,
      '_blank'
    )
  }
  return (
    <Upload
      acceptedFileTypes={['jpg', 'png']}
      id="upload-on-file-click"
      onFileClick={mockAsyncFileFetching}
    />
  )
}
render(<Component />)

Upload programmatically clearing files using clearFiles #

Last opp dokumenter

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

Tillatte filer:
JPG, PNG
Maks filstørrelse:
5 MB
const Component = () => {
  const { setFiles, clearFiles } = Upload.useUpload('upload-clear-files')
  useEffect(() => {
    setFiles([
      {
        file: createMockFile('1501870.jpg', 123, 'image/png'),
        id: '1',
      },
      {
        file: createMockFile(
          'file-name-that-is-very-long-and-has-letters.png',
          123,
          'image/png'
        ),
        id: '2',
      },
    ])
  }, [setFiles])
  return (
    <>
      <Upload acceptedFileTypes={['jpg', 'png']} id="upload-clear-files" />
      <Button top="small" onClick={() => clearFiles()}>
        Clear files
      </Button>
    </>
  )
}
render(<Component />)

Upload with file description#

Last opp dokumenter

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

Tillatte filer:
JPG, PNG
Maks filstørrelse:
5 MB
const Component = () => {
  const { setFiles } = Upload.useUpload('upload-description')
  useEffect(() => {
    setFiles([
      {
        file: createMockFile('1501870.jpg', 0, 'image/png'),
        id: '1',
        description: 'This is my description',
      },
      {
        file: createMockFile(
          'file-name-that-is-very-long-and-has-letters.png',
          0,
          'image/png'
        ),
        id: '2',
      },
      {
        file: createMockFile('123.jpg', 123, 'image/png'),
        id: '3',
        description: (
          <>
            <Badge
              variant="information"
              status="positive"
              content="Status"
            />{' '}
            This is my description
          </>
        ),
      },
      {
        file: createMockFile('321.jpg', 0, 'image/png'),
        id: '4',
      },
    ])
  }, [setFiles])
  return (
    <Upload
      acceptedFileTypes={['jpg', 'png']}
      id="upload-description"
      onChange={({ files }) =>
        setFiles(
          files.map((fileItem) => {
            return {
              ...fileItem,
              description: 'This is my description',
            }
          })
        )
      }
    />
  )
}
render(<Component />)

Upload with file without delete button#

Last opp dokumenter

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

Tillatte filer:
JPG, PNG
Maks filstørrelse:
5 MB
const Component = () => {
  const { setFiles } = Upload.useUpload('upload-remove-delete-button')
  useEffect(() => {
    setFiles([
      {
        file: createMockFile('1501870.jpg', 0, 'image/png'),
        id: '1',
      },
      {
        file: createMockFile(
          'file-name-that-is-very-very-very-very-very-very-very-verylong-to-display-that-when-remove-button-is-hidden-file-name-will-take-full-width.png',
          0,
          'image/png'
        ),
        description:
          'Description that is very very very very very very very very long to display that when delete button is removed, file description will take full width.',
        removeDeleteButton: true,
      },
      {
        file: createMockFile('123.jpg', 0, 'image/png'),
        id: '3',
      },
      {
        file: createMockFile('321.jpg', 0, 'image/png'),
        id: '4',
        deleteButtonProps: {
          tooltip: 'Button tooltip',
        },
      },
    ])
  }, [setFiles])
  return (
    <Upload
      acceptedFileTypes={['jpg', 'png']}
      id="upload-remove-delete-button"
      onChange={({ files }) =>
        setFiles(
          files.map((fileItem) => {
            return {
              ...fileItem,
              deleteButtonProps: {
                tooltip: `Do you want to remove ${fileItem.file.name} file?`,
              },
            }
          })
        )
      }
    />
  )
}
render(<Component />)
Suggest an edit