Module: FileUpload

A file upload component.

Parameters:

Name Type Description

props

object

Component props.

Properties

Name	Type	Description
`acceptedFileTypes`	string	The allowed file types for the input's accept attribute.
`allowedFileTypes`	Array	The allowed file types helper text.
`allowMultiUpload`	boolean	Allow multi-file upload.
`aboveDropZoneChildren`	JSX.Element	Slot content for React element children rendered above the drop zone.
`belowDropZoneChildren`	JSX.Element	Slot content for React element children rendered below the drop zone.
`clickable`	boolean	Whether clicking the upload area triggers the file upload UI.
`customAttributes`	object	Custom attributes for the component.
`customClasses`	string \| Array \| object	Custom classes for the component.
`customWrapperAttributes`	object	Custom attributes for the component wrapper.
`customWrapperClasses`	string \| Array \| object	Custom classes for the component wrapper.
`disabled`	boolean	Whether this component should be disabled.
`externalManager`	boolean	Whether to use the external file manager.
`fileArray`	Array	The files to be uploaded.
`fileId`	string	The ID of the file.
`fileURL`	string	The url for an already uploaded file.
`hasDrop`	boolean	Whether to enable file dropping functionality.
`i18n`	object	Translated strings for the UI.
`id`	string	ID of the file input.
`imagePreview`	boolean	Whether to show an image specific or generic file preview. Only supported for single file uploads.
`maxHeight`	string \| number	The maximum height for the image.
`maxWidth`	string \| number	The maximum width for the image.
`multiPreviewActionButtonAttributes`	object	Custom attributes for the multi-file preview action button.
`multiPreviewActionButtonClasses`	string \| Array \| object	Custom classes for the multi-file preview action button.
`name`	string	The name attribute for the file input.
`onFileSelect`	function	Handler for file selection.
`previewAttributes`	object	Attributes for the preview.
`previewClasses`	Array	Classes for the preview.
`showAllowedFileTypesText`	boolean	Whether or not to show the allowed file types helper text.
`showAllowedImageDimensionsText`	boolean	Whether or not to show the allowed image dimensions helper text.
`showMultiPreviewActions`	boolean	Whether or not to show the multi-file preview actions.
`spacing`	string \| number \| Array \| object	The spacing for the component.
`theme`	string	The theme for the component.
`uploadIcon`	string	The icon to show for the upload button.
`uploadIconPrefix`	string	The prefix to use for the upload button icon.
`wrapperAttributes`	object	Custom attributes for the wrapper element.
`wrapperClasses`	string \| Array \| object	Custom classes for the wrapper element.

ref

object | null

Ref to the component.

Since: 1.1.15
Source: elements/FileUpload/index.js, line 60

Returns:

The file upload component.

Type:: JSX.Element

Example

import FileUpload from '@gravityforms/components/react/admin/elements/FileUpload';

return <FileUpload name="file-upload" />;

Methods

(inner) handleRemove(event) → {void}

Handler for removing file from single-file upload field.

Parameters:

Name	Type	Description
`event`	object	Event object.

Since: 1.1.15
Source: elements/FileUpload/index.js, line 304

Returns:

Type:: void

(inner) handleRemoveMultiFile(event, index) → {void}

Handler for removing file from multi-file upload field.

Parameters:

Name	Type	Description
`event`	object	Event object.
`index`	number	Index of the file to remove.

Since: 5.8.5
Source: elements/FileUpload/index.js, line 323

Returns:

Type:: void

(inner) onFileInputChange(event) → {void}

Handler for change event on file input.

Parameters:

Name	Type	Description
`event`	object	Event object.

Since: 1.1.15
Source: elements/FileUpload/index.js, line 250

Returns:

Type:: void

(inner) onFileInputKeyDown(event) → {void}

Handler for keydown event on file input.

Parameters:

Name	Type	Description
`event`	object	Event object.

Since: 2.0.1
Source: elements/FileUpload/index.js, line 265

Returns:

Type:: void

(inner) onSelectFile(files) → {function}

Handler for selecting a file.

Parameters:

Name	Type	Description
`files`	Array \| FileList	Array of files.

Since: 1.1.15
Source: elements/FileUpload/index.js, line 206

Returns:

Function to clear timeout.

Type:: function

(inner) onTargetClick(event) → {void}

Handler for click event on file drop target.

Parameters:

Name	Type	Description
`event`	object	Event object.

Since: 1.1.15
Source: elements/FileUpload/index.js, line 282

Returns:

Type:: void

(inner) renderFileOptions() → {string}

Renders allowed file type options.

Since: 1.1.15
Source: elements/FileUpload/index.js, line 345

Returns:

String list of allowed file types.

Type:: string