Uploader

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
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)

At the bottom of the Main properties menu, you can find additional options:

• Render When: Provides conditional rendering for your calendar 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	number	Specifies the width for your component
  Height	number	Specifies the height for your component
  Margin top/right/bottom/left	number	Margin values for you component
  Color	string	Allows customizing the text color
  Background color	string	Enables customizing the background color

📦 File Upload Server example

To test the Uploader component, you can use the File Upload Server. This Node.js server demonstrates how to handle file uploads and serve them via static endpoints.

For more details, refer to the File Upload Server documentation.