Skip to content
Home

Upload

Info
Demos
Properties
Events

Import

import { Value } from '@dnb/eufemia/extensions/forms'
render(<Value.Upload />)

Description

Value.Upload is a value component for displaying a list of files.

There is a corresponding Field.Upload component.

import { Value } from '@dnb/eufemia/extensions/forms'
render(<Value.Upload />)

Relevant links

Demos

Placeholder

No value given
Code Editor
<Value.Upload placeholder="No value given" />

Value

og
Code Editor
<Value.Upload
  inline
  value={[
    {
      file: createMockFile('fileName-1.png', 1000000, 'image/png'),
      exists: false,
      id: '1',
    },
    {
      file: createMockFile('fileName-2.png', 2000000, 'image/png'),
      exists: false,
      id: '2',
    },
  ]}
/>

With displaySize property

With download property

Custom format

or

Label

Label text
Code Editor
<Value.Upload label="Label text" showEmpty />

Label and value

Label text og

Inline

This is before the component og This is after the component

List variants

Ordered List
Unordered List

List types

Ordered List a
Ordered List A
Ordered List i
Ordered List I
Unordered List square
Unordered List circle

Field.Upload path

My selections

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

Tillatte filformater:
JPEG, JPG, PDF, PNG
Maks filstørrelse:
5 MB
My selections

Using onFileClick

Label text og
Code Editor
<Value.Upload
  label="Label text"
  value={[
    {
      file: createMockFile('35217511.jpg', 1000000, 'image/png'),
      exists: false,
      id: '1',
    },
    {
      file: createMockFile('1501870.jpg', 2000000, 'image/png'),
      exists: false,
      id: '2',
    },
  ]}
  onFileClick={async ({ 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',
    )
  }}
/>

Display files as non-clickable

When file size is 0 or not given (new File([], name, { type })), the file is displayed as a span instead of an anchor. How ever, when onFileClick is given, the file will be clickable as a button.

Label text og