Imagelist

import Imagelist from 'frui/fields/Imagelist';

Copy

Props

File accepts all props of a standard HTML Input element. See Moz for standard input attributes.

Name	Type	Required	Notes
className	string	No	Standard HTML class names
defaultValue	string[]	No	Alias to value
error	string\|boolean	No	Any error message
name	string	No	Used for react server components.
onUpdate	Function	No	Update event handler
onUpload	Function	Yes	Called when file is loaded
passRef	LegacyRef	No	Passes ref to html input
style	CSS Object	No	Standard CSS object
uploading	string	No	Phrased used when uploading files
value	string[]	No	Default value

Basics

https://images.wsj.net/im-580612/8SR

<Imagelist className="bg-white w-full" value={['https://images.wsj.net/im-580612/8SR']}  />

Copy

Events

Imagelist have a prop called onUpload. This is where you should add your logic for handling the file upload. Using this in combination with onUpdate will allow you to pass values from upload to form processing.

https://images.wsj.net/im-580612/8SR

<Imagelist
  className="w-full bg-white"
  defaultValue={[
    'https://images.wsj.net/im-580612/8SR', 
    'https://images.wsj.net/im-580612/8SR'
  ]}
  onUpload={(files, next) => {
    //just a mock call
    setTimeout(() => {
      next(files.map((file, i) => 'https://images.wsj.net/im-580612/8SR'))
    }, 1000)
  }}
  onUpdate={console.log}
/>

Copy

On Upload

The onUpload event is triggered when a file has been selected. The following arguments are passed to the event handler:

Name	Type	Sample
images	File[]	see: File Object
next	(urls: string[]) => void	`next(['//cdn.ex.com/img.jpg'])`

On Update

The onUpdate event is triggered when the value has been updated. The following arguments are passed to the event handler:

Name	Type	Sample
value	string[]	`['foobar']`

Errors

You can pass the error prop to highlight the input field red.

<Imagelist error={string|true} className="bg-white w-full" />

Copy

Custom Styles

You can add your own custom class to imagelist or use any of the respective frui-field-imagelist, frui-field-imagelist-control, frui-field-imagelist-file, frui-field-imagelist-link, frui-field-imagelist-image, and frui-field-imagelist-remove CSS classes.

Image

Input