Image Restrictions in the React Image Editor component

25 Mar 202512 minutes to read

The Image Editor allows users to specify image extensions, as well as the minimum and maximum image sizes for uploaded or loaded images using the uploadSettings property. End users will receive a clear alert message if an uploaded image does not meet the defined criteria, ensuring a seamless and user-friendly upload experience.

Note: File restrictions apply when uploading images to the Image Editor, whether through the open method or the built-in uploader. If uploadSettings is not defined in the sample, the Image Editor, by default, allows files with .jpg, .png, .svg, and .webp extensions, without any file size restrictions.

Allowed image extensions

The Image Editor allows users to specify acceptable file extensions for uploaded images using the uploadSettings.allowedExtensions property, ensuring that only supported formats, such as .jpg, .png, and .webp and .svg are allowed. This helps maintain compatibility and prevents errors caused by unsupported file types. By default, the Image Editor allows files with .jpg, .png, .webp, and .svg extensions.

Note: To specify allowed extensions in the upload settings, use the format ‘.png, .svg’, listing the permitted file types as a comma-separated string.

Here is an example of configuring image restrictions using the uploadSettings property.

import { ImageEditorComponent, RedactType } from '@syncfusion/ej2-react-image-editor';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { Browser } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from "react-dom";

export default class App extends React.Component {
    imgObj;
    uploadSettings = {
        allowedExtensions: ".png, .svg",
    };
    loadInvalidImage() {
        this.imgObj.open('flower.jpeg');
    }
    render() {
        return (<div className='e-img-editor-sample'>
            <ImageEditorComponent ref={(img) => { this.imgObj = img; }} height="350px" uploadSettings = {this.uploadSettings}>
            </ImageEditorComponent>
                    <div>
                        <ButtonComponent cssClass='e-primary' content='Load Invalid Image' onClick={this.loadInvalidImage.bind(this)}/>
                    </div>
                </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('image-editor'));
import { ImageEditorComponent, UploadSettingsModel } from '@syncfusion/ej2-react-image-editor';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { Browser } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    let imgObj: ImageEditorComponent;
    let uploadSettings: UploadSettingsModel = {
        allowedExtensions: ".png, .svg"
    };
    function loadInvalidImage(): void {
        imgObj.open('flower.jpeg');
    }

    return (
        <div className='e-img-editor-sample'>
        <ImageEditorComponent ref={(img) => { imgObj = img }} height="350px" uploadSettings = {uploadSettings}>
        </ImageEditorComponent>
                <div>
                    <ButtonComponent cssClass='e-primary' content='Load Invalid Image' onClick = {loadInvalidImage}/>
                </div>
            </div>
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById('image-editor'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Image Editor</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-image-editor/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/material.css"rel="stylesheet">
	<link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='image-editor'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Minimum and maximum image size

The Image Editor allows users to specify the minimum and maximum size limits for uploaded image files by using the uploadSettings.minFileSize and uploadSettings.maxFileSize properties. This ensures that images meet specific requirements, maintaining consistency and preventing oversized or undersized files from being processed.

Note: Users can also upload images as base64 strings, in which case file extension validation is bypassed, but file size restrictions still apply.

Here is an example of configuring image restrictions using the uploadSettings property.

import { ImageEditorComponent, RedactType } from '@syncfusion/ej2-react-image-editor';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { Browser } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from "react-dom";

export default class App extends React.Component {
    imgObj;
    uploadSettings = {
        minFileSize: 1024,     // Minimum file size in bytes (1 KB)
        maxFileSize: 90 * 1024  // Maximum file size in bytes (100 KB)
    };
    loadInvalidImage() {
        this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png');
    }
    render() {
        return (<div className='e-img-editor-sample'>
            <ImageEditorComponent ref={(img) => { this.imgObj = img; }} height="350px" uploadSettings = {this.uploadSettings}>
            </ImageEditorComponent>
                    <div>
                        <ButtonComponent cssClass='e-primary' content='Load Invalid Image' onClick={this.loadInvalidImage.bind(this)}/>
                    </div>
                </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('image-editor'));
import { ImageEditorComponent, UploadSettingsModel } from '@syncfusion/ej2-react-image-editor';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { Browser } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    let imgObj: ImageEditorComponent;
    let uploadSettings: UploadSettingsModel = {
        minFileSize: 1024,     // Minimum file size in bytes (1 KB)
        maxFileSize: 90 * 1024  // Maximum file size in bytes (90 KB)
    };
    function loadInvalidImage(): void {
        imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png');
    }

    return (
        <div className='e-img-editor-sample'>
        <ImageEditorComponent ref={(img) => { imgObj = img }} height="350px" uploadSettings = {uploadSettings}>
        </ImageEditorComponent>
                <div>
                    <ButtonComponent cssClass='e-primary' content='Load Invalid Image' onClick = {loadInvalidImage}/>
                </div>
            </div>
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById('image-editor'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Image Editor</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-image-editor/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/material.css"rel="stylesheet">
	<link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='image-editor'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>