Skip to main content
Version: v2

RHFFileUploaderNEW

RHFFileUploader component is a flexible and easy-to-use file input field built supporting both single and multi-file uploads, optional file type and size validation, and customizable UI elements such as the upload button and file list items.

Usage​

import RHFFileUploader, { RHFFileUploaderProps, FileUploadError } from '@nish1896/rhf-mui-components/mui/file-uploader';

Here’s a basic example of the component configured to accept a single file:

<RHFFileUploader
  fieldName="resume"
  control={control}
  errorMessage={errors?.resume?.message}
/>

A file object has the following properties:

{
  lastModified: 1738870405923,
  lastModifiedDate: "Fri Feb 07 2025 01:03:25 GMT+0530 (India Standard Time)",
  name: "Picture.png",
  size: 860146,
  type: "image/png",
  webkitRelativePath: ""
}

When uploading files via an API, the files are sent within a FormData object. On a Node.js Express server, you can handle this incoming data using the Multer middleware. Here’s an example illustrating how to handle file uploads with Multer in Express, where I have used various file upload middlewares to store data in a dedicated folder based on certain conditions.

async function onFormSubmit(formValues: FormSchema) {
  const formData = new FormData();
  const { resume, pictures } = formValues;

  /* resume can be null, hence handle the null check */
  resume && formData.append('resume', resume);

  Array.isArray(pictures) && pictures.forEach(file => {
    formData.append('pictures', file);
  });
  await sendFormData(url, formData);
}

Advanced Usage​

For more advanced scenarios, RHFFileUploader can be configured to:

  • Accept multiple files.
  • Restrict file types using the accept prop, for example, to allow only images (image/*).
  • Limit the maximum number of valid files a user can upload
  • Use a custom upload button to match your design requirements.
  • Customize the display of uploaded files, including file names, sizes, and a remove button.
<RHFFileUploader
  fieldName="pictures"
  control={control}
  multiple
  accept="image/*"
  showFileSize
  maxFiles={3}
  maxSize={5 * 1024 * 1024}
  label={
    <Typography color="secondary" sx={{ fontWeight: 600 }}>
      <CloudUploadIcon />
      {` Upload Photos`}
    </Typography>
  }
  renderUploadButton={fileInput => (
    <div style={{ width: '200px' }}>
      <IconButton component="label" tabIndex={-1}>
        <UploadFileIcon />
        {fileInput}
      </IconButton>
    </div>
  )}
  renderFileItem={(file, index) => (
    <Typography variant="body2">
      {index + 1}. {file.name}
      {getFileSize(file.size, { precision: 2 })}
    </Typography>
  )}
  onUploadError={(errors, rejectedFiles) => {
    alert(`${rejectedFiles.length} file(s) were rejected as ${errors.join(' ,')}`)
  }}
/>

The renderUploadButton prop allows you to render a custom upload button, with the fileInput (the hidden file input) provided as its child.

Similarly, the renderFileItem prop lets you customize how each uploaded file is displayed in the file list.

note

Make sure to add the component="label" prop to your custom Button or IconButton component to ensure the file input is triggered correctly, as file dialogs can only be opened via label elements or direct interaction with file inputs.

Additionally, add tabIndex={-1} to the button to exclude it from the tab order, keeping focus management limited to the hidden file input itself for better accessibility.

Examples​

API​

The RHFFileUploader accepts the following props:

NameTypeRequiredDescription
fieldNamestring✅React Hook Form requires name as a key for the registration process. This is a required prop for all components.
controlUseFormControl✅The control option yielded on calling the useForm hook.
registerOptionsRegisterOptionsRegister options for validation if using react-hook-form without any validation libraries like yup or Joi.
requiredbooleanIndicates that the field is mandatory by adding an asterisk symbol (*) to the formLabel. This visual cue helps users quickly identify required fields in the form.
acceptstring✅The file types to accept in the file uploader component. Eg: image/* or .pdf,.docx.
multiplebooleanAllow selection of single or multiple values for a formfield.
maxFilesnumberThe maximum number of files allowed to be uploaded in the file uploader component. Extra files will be rejected.
maxSizenumberThe maximum file size in bytes allowed for each uploaded file.
showFileSizebooleanShow the file size of the uploaded file(s) in the file uploader component.
hideFileListbooleanHide the list of files uploaded in the file uploader component.
onValueChange(files: File OR File[] OR null) => voidAn optional callback function that returns the file(s) uploaded in the file uploader component.
onUploadError(errors: FileUploadError[], rejectedFiles: File[]) => voidCallback function that returns the error message and rejected files when uploaded files fail the validation during upload.
renderUploadButton(fileInput: ReactNode) => ReactNodeCustom render function to replace the default upload button in the file uploader component. Refer to the example for more details.
renderFileItem(file: File, index: number) => ReactNodeCustom render function to replace the default file item in the file uploader component. Refer to the example for more details.
disabledbooleanA boolean value to enable or disable editing of the form field.
labelReactNodeThe text to render in FormLabel component. By default, the value of fieldName such as firstName will be transformed to display "First Name" using the fieldNameToLabel function.
showLabelAboveFormFieldbooleanRender form label above the form field in FormLabel component.
formLabelPropsFormLabelPropsFormLabelProps to customise FormLabel component for a field. Multiple fields can be configured using the ConfigProvider component.
errorMessageReactNodeError message to be shown for a field in FormHelperText component.
hideErrorMessagebooleanA flag to prevent replacement of helper text of a field by the error message when the validation is triggered.
helperTextReactNodeThe content to display within the FormHelperText component below the field. If the field validation fails, this content will be overridden by the corresponding error message.
formHelperTextPropsFormHelperTextPropsFormHelperTextProps to customise FormHelperText component for a field. Multiple fields can be configured using the ConfigProvider component.
fullWidthbooleanSet the width of the file uploader component to 100%.