Image

import Image from 'frui/fields/Image';

Copy

Props

Image 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.
onChange	Function	No	Event handler when value has changed
onUpdate	Function	No	Update event handler
onUpload	Function	Yes	Called when image is loaded
passRef	LegacyRef	No	Passes ref to html input
style	CSS Object	No	Standard CSS object
uploading	string	No	Phrased used when uploading images
value	string	No	Default value

Basics

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

<Image className="bg-white w-full" value="https://images.wsj.net/im-580612/8SR" />

Copy

Events

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

<Image
  className="bg-white w-full" 
  onUpload={(image, next) => {
    //just a mock call
    setTimeout(() => {
      next('https://images.wsj.net/im-580612/8SR')
    }, 5000)
  }} 
  onUpdate={value => alert(value)} 
/>

Copy

On Change

The onChange event is triggered when the value has changed. The following arguments are passed to the event handler:

Name	Type	Sample
event	Event Object	see: Change Event

On Upload

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

Name	Type	Sample
image	File	see: File Object
next	(url: 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.

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

Copy

Custom Styles

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

Filelist

Imagelist