Introduction
The Uploader component is a practical element that enables users to upload files from their device to the form by clicking the corresponding button or via drag-and-drop. It is particularly useful for attaching documents, images, videos, audios, and other files to the form submission. This component is based on Uploader. It is included within the following NPM package: @react-form-builder/components-rsuite. This component can be configured to accept specific file types, configure methods, enable or disable drag-and-drop functionality, and so on. These properties along with the style options are listed and described below.Main properties
The following general properties are available within the Main tab:| Name | Type | Description |
|---|---|---|
| Label | string | Provide a title for your component |
| Action | string | Required field that sets your uploading URL |
| Accept | string | Comma-separated list of one or more file types (e.g., .pdf, audio, etc.). Refer to HTML attribute accept for more information |
| Auto upload | boolean | If set to true, automatically uploads files after selecting them |
| Custom Element | boolean | If set to true, turns the upload button into a custom element |
| Disable multipart | boolean | If set to true, disables the use of a multipart form for file upload and streams the file instead. This is useful for APIs that expect file uploads to be streamed, such as Amazon S3 |
| Disabled | boolean | If set to true, disables the component |
| Read Only | boolean | If set to true, makes your checkbox unavailable to interact with |
| Disabled File Item | boolean | If set to true, disables the the file list |
| Draggable | boolean | If set to true, enables drag-and-drop to upload |
| File List Visible | boolean | If set to false, makes the file list invisible |
| List Type | choice | Sets the list style (i.e., text, picture-text, or picture) |
| Method | string | The HTTP (POST) method of upload request |
| Multiple | boolean | If set to true, allows multiple file uploads to be selected at a time |
| Name | string | Specifies the parameter name for the uploaded file |
| Removable | boolean | Is set to true, makes file list removable |
| Timeout | number | Specifies the time limit in milliseconds for the file upload to complete |
| With credentials | boolean | If set to true, carries cookies when uploading, allowing the server to authenticate upload requests |
| File List | file type | Sets the list of uploaded files. Includes Name (file name string), FileKey (unique file ID), and URL (preview link) |
- Render When: Provides conditional rendering for your component as described in the corresponding chapter.
- HTML attributes: Allows you to provide custom HTML attributes for your form.
Style properties
These are properties that allow to customize the size, color and other style properties of your component:- For Device: You can provide component’s style customization for all devices or specific devices by using this dropdown list. Refer to Adaptive Layout for more details.
- Component > Class Name: Add a class name for your component for the subsequent styling if necessary.
-
Wrapper: The options below enable you to tailor the appearance of your component and customize
it for a specific device type, as selected in the For Device property:
Name Type Description Width numberSpecifies the width for your component Height numberSpecifies the height for your component Margin top/right/bottom/left numberMargin values for you component Color stringAllows customizing the text color Background color stringEnables customizing the background color