Skip to content
Home

Value.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
<Value.Upload placeholder="No value given" />

Value#

og 
<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
<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 
<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. However, when onFileClick is given, the file will be clickable as a button.

Label text og
Suggest an edit