FileUpload

Example

Styled

Drag files here or click to upload
Default

Code

Razor (cshtml, Razor)
<UMS.Razor.FileUpload.FileUpload HideUploadButton="true" UploadedFilesChanged="OnChange" />
<UMS.Razor.FileUpload.FileUpload HideUploadButton="false" UploadedFilesChanged="OnChange" MaxAllowFileSizeInMB="5" />

    <div class="image-container">
        @foreach (var item in imageSources)
        {
            <img src="@item" />
        }
    </div>
C#
private List<string> imageSources = [];

    async Task OnChange(List<IBrowserFile> files)
    {
        imageSources.Clear();
        foreach (var file in files)
        {
            long MaxFileSize = 5 * 1024 * 1024;

            using var stream = file.OpenReadStream(MaxFileSize);
            using var ms = new MemoryStream();
            await stream.CopyToAsync(ms);
            imageSources.Add($"data:{file.ContentType};base64,{Convert.ToBase64String(ms.ToArray())}");
        }
    }
An unhandled error has occurred. Reload 🗙