Image Restrictions in the ASP.NET CORE Image Editor control

5 Mar 20254 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.

CSHTML
Default.cs
@{
    Syncfusion.EJ2.ImageEditor.ImageEditorUploadSettings uploadSettings = new Syncfusion.EJ2.ImageEditor.ImageEditorUploadSettings
    {
        AllowedExtensions = ".jpeg, .jpg"
    };
}

<div class="col-lg-12 control-section e-img-editor-sample">
    <ejs-imageeditor id="image-editor" uploadSettings="uploadSettings"></ejs-imageeditor>
</div>
<ejs-button id="loadInvalidImage" onclick="loadInvalidImage()" cssClass="e-primary" content="Load Invalid Image"></ejs-button>

<script>
    function loadInvalidImage() {
        var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
        imageEditorObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png');
    }

</script>

<style>
    .image-editor {
        margin: 0 auto;
    }

    .e-img-editor-sample {
        height: 80vh;
        width: 100%;
    }

    @@media only screen and (max-width: 700px) {
        .e-img-editor-sample {
            height: 75vh;
            width: 100%;
        }
    }

    .control-wrapper {
        height: 100%;
    }
</style>
public ActionResult Default()
{
    return View();
}

Output be like the below.

ImageEditor Sample

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.

CSHTML
Default.cs
@{  
    
    Syncfusion.EJ2.ImageEditor.ImageEditorUploadSettings uploadSettings = new Syncfusion.EJ2.ImageEditor.ImageEditorUploadSettings
    {
        MinFileSize = 1024,     // Minimum file size in bytes (1 KB)
        MaxFileSize = 102400,  // Maximum file size in bytes (100 KB)
    };
}

<div class="col-lg-12 control-section e-img-editor-sample">
    <ejs-imageeditor id="image-editor" created="created"  uploadSettings="uploadSettings"></ejs-imageeditor>
</div>
<ejs-button id="loadInvalidImage" onclick="loadInvalidImage()" cssClass="e-primary" content="Load Invalid Image"></ejs-button>

<script>
    function loadInvalidImage() {
        var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
        imageEditorObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png');
    }

</script>

<style>
    .image-editor {
        margin: 0 auto;
    }

    .e-img-editor-sample {
        height: 80vh;
        width: 100%;
    }

    @@media only screen and (max-width: 700px) {
        .e-img-editor-sample {
            height: 75vh;
            width: 100%;
        }
    }

    .control-wrapper {
        height: 100%;
    }
</style>
public ActionResult Default()
{
    return View();
}

Output be like the below.

ImageEditor Sample