# Loading Images in the Blazor ImageEditor

The [ImageEditor](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/overview) can display an image from three sources:

* [A `byte[]` in the application](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/loading-images#load-image-from-byte-array)
* [A URL](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/loading-images#load-image-from-url)
* [A file that the user selects on their device](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/loading-images#let-users-open-a-file)

`Data` takes precedence over `ImageUrl`. If both parameters have a value, the component displays `Data`.

The component also allows you to [restrict the files that users can open](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/loading-images#file-restrictions) and shows an [error state](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/loading-images#error-state) when a file fails to load.

## Load Image from Byte Array

Set the `Data` parameter to a `byte[]` that holds the image content. To load another image, assign a new array instance to the parameter. To clear the editor, set `Data` to `null` or to an empty array.

This example runs in a server-side component and reads a file from the server's `wwwroot` folder. In Blazor WebAssembly, fetch the image bytes with a configured `HttpClient` and its `GetByteArrayAsync` method instead.

> caption Load an image from a byte array in a server-side component

```RAZOR.skip-repl
@inject IWebHostEnvironment HostEnvironment

<TelerikImageEditor Data="@ImageEditorData" Width="100%" Height="600px" />

@code {
    private byte[]? ImageEditorData { get; set; }

    protected override async Task OnInitializedAsync()
    {
        string imagePath = Path.Combine(HostEnvironment.WebRootPath, "images", "sample-photo.jpg");

        ImageEditorData = await File.ReadAllBytesAsync(imagePath);
    }
}
```

### Blazor Server Apps and Large Images

In [Blazor Server](https://www.telerik.com/blazor-ui/documentation/getting-started/web-app) apps, the `Data` parameter transfers the image from the .NET runtime to the browser over the SignalR WebSocket. This is an outgoing transfer from the server, so the `MaximumReceiveMessageSize` setting does not limit it, because that setting limits only the messages that the server receives.

After the ImageEditor loads the image, all editing operations run in the browser and do not transfer the image to the server. See [Client-Side Image Processing](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/overview#client-side-image-processing).

For the browser-to-server transfer that `MaximumReceiveMessageSize` does limit, such as obtaining the edited image with `GetFileAsync`, see [Blazor Server Apps and Large Images](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/export#blazor-server-apps-and-large-images) in the Export article.

## Load Image from URL

Set the `ImageUrl` parameter to the address of the image. The component uses `ImageUrl` only when `Data` is `null` or empty.

The ImageEditor reads the image pixels on the client. Images from another origin must allow cross-origin requests, otherwise the browser blocks the operation and the component fires [`OnError`](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/events#onerror).

> caption Load an image from a URL

```RAZOR.skip-repl
<TelerikImageEditor ImageUrl="@ImageEditorUrl" Width="100%" Height="600px" />

@code {
    private string ImageEditorUrl { get; set; } = "images/sample-photo.jpg";
}
```

## Let Users Open a File

When no image is loaded, the ImageEditor displays an empty state with a button that opens a file dialog. Users can also open another image at any time from the Open tool in the [component toolbar](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/tools#toolbar), or with the `Ctrl` + `O` [keyboard shortcut](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/keyboard-navigation).

The component processes the selected file in the browser and fires [`OnOpen`](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/events#onopen) before it displays the image. Use the event to inspect the file name, extension, size, and pixel dimensions, or to cancel the operation.

### File Restrictions

Configure the allowed files through the `<ImageEditorFileSelectSettings>` tag inside the `<ImageEditorSettings>` tag. The ImageEditor builds the supported-formats text in the empty state and in the [error state](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/loading-images#error-state) from the allowed extensions.

<style>
    .article table {
        table-layout: auto;
        word-break: normal;
    }
</style>

| Parameter           | Type and Default Value                                   | Description                                                                                                                                                                        |
| ------------------- | -------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `AllowedExtensions` | `List<string>` <br /> (`.jpg`, `.jpeg`, `.png`, `.webp`) | The file extensions that users can open. Include the leading dot, for example, `".png"`.                                                                                           |
| `MaxFileSize`       | `long?` <br /> (`20971520`)                              | The maximum file size in bytes. The default value is 20 MB. A much larger value can degrade the component performance, because the editor processes the full image in the browser. |

> caption Restrict the files that users can open

```RAZOR.skip-repl
<TelerikImageEditor Width="100%" Height="600px">
    <ImageEditorSettings>
        <ImageEditorFileSelectSettings AllowedExtensions="@AllowedExtensions"
                                       MaxFileSize="@(5 * 1024 * 1024)" />
    </ImageEditorSettings>
</TelerikImageEditor>

@code {
    private List<string> AllowedExtensions { get; set; } = new List<string>() { ".jpg", ".jpeg", ".png" };
}
```

## Error State

The ImageEditor displays an error state when the file does not match the [file restrictions](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/loading-images#file-restrictions) or when the image fails to load. The error state lists the supported formats and allows the user to select another file.

The component also fires the [`OnError`](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/events#onerror) event, so that the application can log the reason or show a [Notification](https://www.telerik.com/blazor-ui/documentation/components/notification/overview).

## Next Steps

* [Explore the ImageEditor tools](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/tools)
* [Export the edited image](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/export)
* [Handle the ImageEditor events](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/events)

## See Also

* [Live Demo: ImageEditor](https://demos.telerik.com/blazor-ui/imageeditor/overview)
* [ImageEditor API Reference](https://www.telerik.com/blazor-ui/documentation/api/telerik.blazor.components.telerikimageeditor)