Skip to content
Home

Value.Upload#

Info
Demos
Properties
Events

Demos#

Placeholder#

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

Value#

fileName-1.png og fileName-2.png
<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#

fileName-1.png (1 MB)

With download property#

fileName-1.png

Custom format#

fileName-1.png or fileName-2.png

Label#

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

Label and value#

Label textfileName-1.png og fileName-2.png

Inline#

This is before the component fileName-1.png og fileName-2.png This is after the component

List variants#

Ordered List
  1. fileName-1.png
  2. fileName-2.png
  3. fileName-3.png
Unordered List
  • fileName-1.png
  • fileName-2.png
  • fileName-3.png

List types#

Ordered List a
  1. fileName-1.png
  2. fileName-2.png
  3. fileName-3.png
Ordered List A
  1. fileName-1.png
  2. fileName-2.png
  3. fileName-3.png
Ordered List i
  1. fileName-1.png
  2. fileName-2.png
  3. fileName-3.png
Ordered List I
  1. fileName-1.png
  2. fileName-2.png
  3. fileName-3.png
Unordered List square
  • fileName-1.png
  • fileName-2.png
  • fileName-3.png
Unordered List circle
  • fileName-1.png
  • fileName-2.png
  • fileName-3.png

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
  • fileName-1.png
  • fileName-2.png
  • fileName-3.png

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 text35217511.jpg og 1501870.jpg
Suggest an edit