Example of File Restrict in React Image Editor Component

All Controls
/
Image-editor
/
FileRestrict

This sample demonstrates the file restriction feature in the Image Editor component, allowing customization of file extensions, minimum and maximum file sizes, and drag-and-drop functionality.

More Details...

Loading....
Description

This sample highlights the enhanced configuration capabilities of the Image Editor component through the uploadSettings property. The following features are included:

  • File Extensions: Use a multi-select dropdown with checkboxes to dynamically choose the allowed file extensions. Supported values include jpeg, jpg, png, svg, webp, and bmp.
  • File Size: Numeric textboxes to set minimum and maximum file sizes dynamically.
  • Dynamic Updates: Changes made to the numeric textboxes or the dropdown options immediately reflect in the component's uploadSettings.
  • Upload Settings: Predefined settings include:
    • Allowed Extensions: .jpeg, .png, .svg, .webp, .bmp
    • Minimum File Size: 1 KB
    • Maximum File Size: 100 KB