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



(in Bytes)

JPEG, JPG, PNG, SVG, WebP, BMP
Or drop files here
Drag and drop your image here or Browse here...Supports: JPG, PNG, SVG, WebP, and BMP with file size between 1.00 MB and 100.00 MB
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