File

import File from 'frui/fields/File';

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.
onChange	Function	No	Event handler when value has changed
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

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

Copy

Events

Files have an extra 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.

<File 
  className="bg-white w-full" 
  onUpload={(file, 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 file has been selected. The following arguments are passed to the event handler:

Name	Type	Sample
file	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.

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

Copy

Custom Styles

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

Fieldset

Filelist