Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Upload

Upload the file by clicking

If you edit too much content, signalR communication interruption may be triggered. Please adjust the HubOptions configuration.

builder.Services.Configure<HubOptions>(option => option.MaximumReceiveMessageSize = null);

Basic usage

The InputUpload component is used with other form components to display the file name, select the file and upload it by clicking the browse button, and by setting the ShowRemoveButton parameter, display the delete button, click the delete button to call back onDelete delegate method

Demo

Name:

Adress:

Photo:

@using BootstrapBlazor.Shared.Samples
@inject IStringLocalizer<Uploads> Localizer

<div class="row g-3">
    <div class="col-12 col-sm-6">
        <label for="text1" class="form-label">@Localizer["UploadNormalLabelName"]</label>
        <input id="text1" class="form-control">
    </div>
    <div class="col-12 col-sm-6">
        <label for="text2" class="form-label">@Localizer["UploadNormalLabelAdress"]</label>
        <input id="text2" class="form-control">
    </div>
    <div class="col-12">
        <label for="text3" class="form-label">@Localizer["UploadNormalLabelPhoto"]</label>
        <InputUpload TValue="string" ShowDeleteButton="true" OnChange="@OnFileChange" OnDelete="@OnFileDelete"></InputUpload>
    </div>
</div>
<BlockLogger @ref="Trace" class="mt-3" />

@code {
    private BlockLogger? Trace { get; set; }

    private Task OnFileChange(UploadFile file)
    {
        // 未真正保存文件
        // file.SaveToFile()
        Trace?.Log($"{file.File!.Name} {Localizer["UploadsSuccess"]}");
        return Task.FromResult("");
    }

    private Task<bool> OnFileDelete(UploadFile item)
    {
        Trace?.Log($"{item.OriginFileName} {Localizer["UploadsRemoveMsg"]}");
        return Task.FromResult(true);
    }
}

FormSettings

Use the file upload component to constrain the file format within the form

Demo

Using the ValidateForm form component, custom validation is set by setting the fileValidation label of the model properties to support file extensionsizevalidation, in this case with the extension .png .jpg .jpeg and the file size limit to 50K
After selecting the file and not starting to upload the file, click the submit button to verify that the data is legitimate, and then upload the file OnSubmit callback delegate, noting that the Pictureproperty type is IBrowserFile

@using BootstrapBlazor.Shared.Samples
@inject IStringLocalizer<Uploads> Localizer

<ValidateForm Model="Foo" OnValidSubmit="OnSubmit">
    <div class="row g-3">
        <div class="col-12">
            <BootstrapInput @bind-Value="@Foo.Name" />
        </div>
        <div class="col-12">
            <InputUpload @bind-Value="@Foo.Picture" />
        </div>
        <div class="col-12">
            <Button ButtonType="@ButtonType.Submit" Text="@Localizer["UploadFormSettingsButtonText"]"></Button>
        </div>
    </div>
</ValidateForm>

@code {
    private static Task OnSubmit(EditContext context)
    {
        // 示例代码请根据业务情况自行更改
        // var fileName = Foo.Picture?.Name;
        return Task.CompletedTask;
    }

    private Person Foo { get; set; } = new Person();

    private class Person
    {
        [Required]
        [StringLength(20, MinimumLength = 2)]
        public string Name { get; set; } = "Blazor";

        [Required]
        [FileValidation(Extensions = new string[] { ".png", ".jpg", ".jpeg" }, FileSize = 50 * 1024)]
        public IBrowserFile? Picture { get; set; }
    }
}

Click upload

The ButtonUpload components, classic styles, user click button to pop up the file selection box.

Demo

Click on the browse button select file upload, in this case set IsMultiple-true multiple-selectable file can be uploaded

When you set up IsSingle, you can upload only one image or file

Set ShowUploadList value to false as normal button

@using BootstrapBlazor.Shared.Samples
@inject IStringLocalizer<Uploads> Localizer
@inject ToastService ToastService
@inject IOptionsMonitor<WebsiteOptions> SiteOptions
@implements IDisposable

<div class="row g-3">
    <div class="col-12 col-sm-6">
        <p>@((MarkupString)Localizer["UploadClickUploadTips1"].Value)</p>
        <ButtonUpload TValue="string" IsMultiple="true" ShowProgress="true" OnChange="@OnClickToUpload" OnDelete="@(fileName => Task.FromResult(true))"></ButtonUpload>
    </div>
</div>
<p class="mt-3">@((MarkupString)Localizer["UploadClickUploadTips2"].Value)</p>
<ButtonUpload TValue="string" IsSingle="true" OnChange="@OnClickToUpload" OnDelete="@(fileName => Task.FromResult(true))" class="mt-3"></ButtonUpload>
<p class="mt-3">@((MarkupString)Localizer["UploadClickUploadTips3ShowUploadList"].Value)</p>
<ButtonUpload TValue="string" OnChange="@OnClickToUploadNoUploadList" ShowUploadFileList="false" BrowserButtonText="Upload" BrowserButtonIcon="fa-solid fa-cloud-arrow-up" class="mt-3"></ButtonUpload>

@code {
    /// <summary>
    /// Dispose
    /// </summary>
    public void Dispose()
    {
        ReadToken?.Cancel();
        GC.SuppressFinalize(this);
    }

    private static readonly Random random = new();

    private async Task OnClickToUpload(UploadFile file)
    {
        // 示例代码，模拟 80% 几率保存成功
        var error = random.Next(1, 100) > 80;
        if (error)
        {
            file.Code = 1;
            file.Error = Localizer["UploadsError"];
        }
        else
        {
            await SaveToFile(file);
        }
    }

    private async Task OnClickToUploadNoUploadList(UploadFile file)
    {
        await ToastService.Success("Upload", $"{file.OriginFileName} uploaded success.");
    }

    private CancellationTokenSource? ReadToken { get; set; }

    private static long MaxFileLength => 200 * 1024 * 1024;

    private async Task<bool> SaveToFile(UploadFile file)
    {
        // Server Side 使用
        // Web Assembly 模式下必须使用 webapi 方式去保存文件到服务器或者数据库中
        // 生成写入文件名称
        var ret = false;
        if (!string.IsNullOrEmpty(SiteOptions.CurrentValue.WebRootPath))
        {
            var uploaderFolder = Path.Combine(SiteOptions.CurrentValue.WebRootPath, $"images{Path.DirectorySeparatorChar}uploader");
            file.FileName = $"{Path.GetFileNameWithoutExtension(file.OriginFileName)}-{DateTimeOffset.Now:yyyyMMddHHmmss}{Path.GetExtension(file.OriginFileName)}";
            var fileName = Path.Combine(uploaderFolder, file.FileName);

            ReadToken ??= new CancellationTokenSource();
            ret = await file.SaveToFileAsync(fileName, MaxFileLength, ReadToken.Token);

            if (ret)
            {
                // 保存成功
                file.PrevUrl = $"images/uploader/{file.FileName}";
            }
            else
            {
                var errorMessage = $"{Localizer["UploadsSaveFileError"]} {file.OriginFileName}";
                file.Code = 1;
                file.Error = errorMessage;
                await ToastService.Error(Localizer["UploadFile"], errorMessage);
            }
        }
        else
        {
            file.Code = 1;
            file.Error = Localizer["UploadsWasmError"];
            await ToastService.Information(Localizer["UploadsSaveFile"], Localizer["UploadsSaveFileMsg"]);
        }
        return ret;
    }
}

A list of files has been uploaded

Use DefaultFileList to set up uploaded content

Demo

Test.xls (0 B)

Test.doc (0 B)

Test.ppt (0 B)

Test.mp3 (0 B)

Test.mp4 (0 B)

Test.pdf (0 B)

Test.cs (0 B)

Test.zip (0 B)

Test.txt (0 B)

Test.dat (0 B)

@inject ToastService ToastService
@implements IDisposable

<div class="row g-3">
    <div class="col-12 col-sm-6">
        <ButtonUpload TValue="string" ShowDownloadButton="true" OnDownload="OnDownload" OnDelete="@(fileName => Task.FromResult(true))" DefaultFileList="@DefaultFormatFileList"></ButtonUpload>
    </div>
</div>

@code {
    /// <summary>
    /// Dispose
    /// </summary>
    public void Dispose()
    {
        GC.SuppressFinalize(this);
    }

    private async Task OnDownload(UploadFile item)
    {
        await ToastService.Success("文件下载", $"下载 {item.FileName} 成功");
    }

    private List<UploadFile> DefaultFormatFileList { get; } = new List<UploadFile>()
    {
        new UploadFile { FileName = "Test.xls" },
        new UploadFile { FileName = "Test.doc" },
        new UploadFile { FileName = "Test.ppt" },
        new UploadFile { FileName = "Test.mp3" },
        new UploadFile { FileName = "Test.mp4" },
        new UploadFile { FileName = "Test.pdf" },
        new UploadFile { FileName = "Test.cs" },
        new UploadFile { FileName = "Test.zip" },
        new UploadFile { FileName = "Test.txt" },
        new UploadFile { FileName = "Test.dat" }
    };
}

Upload a folder

Use DefaultFileList to set up uploaded content

Demo

@using BootstrapBlazor.Shared.Samples
@inject IStringLocalizer<Uploads> Localizer
@inject ToastService ToastService
@inject IOptionsMonitor<WebsiteOptions> SiteOptions
@implements IDisposable

<div class="row g-3">
    <div class="col-12 col-sm-6">
        <ButtonUpload TValue="string" IsDirectory="true" OnChange="@OnUploadFolder" OnDelete="@(fileName => Task.FromResult(true))"></ButtonUpload>
    </div>
</div>

@code {
    /// <summary>
    /// Dispose
    /// </summary>
    public void Dispose()
    {
        ReadToken?.Cancel();
        GC.SuppressFinalize(this);
    }

    private async Task OnUploadFolder(UploadFile file)
    {
        // 上传文件夹时会多次回调此方法
        await SaveToFile(file);
    }

    private CancellationTokenSource? ReadToken { get; set; }

    private static long MaxFileLength => 200 * 1024 * 1024;

    private async Task<bool> SaveToFile(UploadFile file)
    {
        // Server Side 使用
        // Web Assembly 模式下必须使用 webapi 方式去保存文件到服务器或者数据库中
        // 生成写入文件名称
        var ret = false;
        if (!string.IsNullOrEmpty(SiteOptions.CurrentValue.WebRootPath))
        {
            var uploaderFolder = Path.Combine(SiteOptions.CurrentValue.WebRootPath, $"images{Path.DirectorySeparatorChar}uploader");
            file.FileName = $"{Path.GetFileNameWithoutExtension(file.OriginFileName)}-{DateTimeOffset.Now:yyyyMMddHHmmss}{Path.GetExtension(file.OriginFileName)}";
            var fileName = Path.Combine(uploaderFolder, file.FileName);

            ReadToken ??= new CancellationTokenSource();
            ret = await file.SaveToFileAsync(fileName, MaxFileLength, ReadToken.Token);

            if (ret)
            {
                // 保存成功
                file.PrevUrl = $"images/uploader/{file.FileName}";
            }
            else
            {
                var errorMessage = $"{Localizer["UploadsSaveFileError"]} {file.OriginFileName}";
                file.Code = 1;
                file.Error = errorMessage;
                await ToastService.Error(Localizer["UploadFile"], errorMessage);
            }
        }
        else
        {
            file.Code = 1;
            file.Error = Localizer["UploadsWasmError"];
            await ToastService.Information(Localizer["UploadsSaveFile"], Localizer["UploadsSaveFileMsg"]);
        }
        return ret;
    }
}

User profile picture upload

AvatarUpload component, using the OnChange to limit the format and size of images uploaded by users. In this example, only jpg/png/bmp/jpeg/gif five picture formats are allowed

Demo

Card form avatar box

Round avatar frame

When you set up IsSingle, you can upload only one image or file

RELATED: [Accept] [Media Types]

Set the preview address PrevUrl with the DefaultFileList property

Verify that an example of using a picture box is used in the form

@using BootstrapBlazor.Shared.Samples
@inject IStringLocalizer<Uploads> Localizer
@inject ToastService ToastService
@implements IDisposable

<div class="row g-3">
    <div class="col-12">
        <p>@Localizer["AvatarUploadTips1"]</p>
        <AvatarUpload TValue="string" Accept="image/*" OnChange="@OnAvatarUpload" OnDelete="@(fileName => Task.FromResult(true))"></AvatarUpload>
    </div>
    <div class="col-12">
        <p>@Localizer["AvatarUploadTips2"]</p>
        <AvatarUpload TValue="string" Accept="image/*" ShowProgress="true" IsCircle="true" OnChange="@OnAvatarUpload" OnDelete="@(fileName => Task.FromResult(true))"></AvatarUpload>
    </div>
    <div class="col-12">
        <p>@((MarkupString)Localizer["AvatarUploadTips3"].Value)</p>
        <AvatarUpload TValue="string" IsSingle="true" OnChange="@OnAvatarUpload" OnDelete="@(fileName => Task.FromResult(true))"></AvatarUpload>
        <p>@((MarkupString)Localizer["AvatarUploadTips5"].Value)</p>
        <p></p>
        <AvatarUpload TValue="string" Accept="image/gif, image/jpeg" IsSingle="true" OnChange="@OnAvatarUpload" OnDelete="@(fileName => Task.FromResult(true))"></AvatarUpload>
    </div>
    <div class="col-12">
        <p>@((MarkupString)Localizer["AvatarUploadTips6"].Value)</p>
        <AvatarUpload TValue="string" Accept="image/gif, image/jpeg" IsSingle="true" DefaultFileList="@PreviewFileList"
                      OnChange="@OnAvatarUpload" OnDelete="@(fileName => Task.FromResult(true))" />
    </div>
    <div class="col-12">
        <p>@((MarkupString)Localizer["AvatarUploadTips7"].Value)</p>
        <ValidateForm Model="Foo" OnValidSubmit="OnAvatarValidSubmit">
            <div class="row g-3">
                <div class="col-12">
                    <BootstrapInput @bind-Value="@Foo.Name" />
                </div>
                <div class="col-12">
                    <AvatarUpload @bind-Value="@Foo.Picture" IsSingle="true" />
                </div>
                <div class="col-12">
                    <Button ButtonType="@ButtonType.Submit" Text="@Localizer["AvatarUploadButtonText"]"></Button>
                </div>
            </div>
        </ValidateForm>
    </div>
</div>
<BlockLogger @ref="AvatarTrace" class="mt-3" />

@code {
    /// <summary>
    /// Dispose
    /// </summary>
    public void Dispose()
    {
        ReadAvatarToken?.Cancel();
        GC.SuppressFinalize(this);
    }

    private static long MaxFileLength => 200 * 1024 * 1024;

    private Person Foo { get; set; } = new Person();

    private List<UploadFile> PreviewFileList { get; } = new(new[] { new UploadFile { PrevUrl = "_content/BootstrapBlazor.Shared/images/Argo.png" } });

    [NotNull]
    private BlockLogger? AvatarTrace { get; set; }

    private CancellationTokenSource? ReadAvatarToken { get; set; }

    private async Task OnAvatarUpload(UploadFile file)
    {
        // 示例代码，使用 base64 格式
        if (file != null && file.File != null)
        {
            var format = file.File.ContentType;
            if (CheckValidAvatarFormat(format))
            {
                ReadAvatarToken ??= new CancellationTokenSource();
                if (ReadAvatarToken.IsCancellationRequested)
                {
                    ReadAvatarToken.Dispose();
                    ReadAvatarToken = new CancellationTokenSource();
                }

                await file.RequestBase64ImageFileAsync(format, 640, 480, MaxFileLength, ReadAvatarToken.Token);
            }
            else
            {
                file.Code = 1;
                file.Error = Localizer["UploadsFormatError"];
            }

            if (file.Code != 0)
            {
                await ToastService.Error(Localizer["UploadsAvatarMsg"], $"{file.Error} {format}");
            }
        }
    }

    private static bool CheckValidAvatarFormat(string format)
    {
        return "jpg;png;bmp;gif;jpeg".Split(';').Any(f => format.Contains(f, StringComparison.OrdinalIgnoreCase));
    }

    private Task OnAvatarValidSubmit(EditContext context)
    {
        AvatarTrace.Log(Foo.Picture?.Name ?? "");
        return Task.CompletedTask;
    }

    private class Person
    {
        [Required]
        [StringLength(20, MinimumLength = 2)]
        public string Name { get; set; } = "Blazor";

        [Required]
        [FileValidation(Extensions = new string[] { ".png", ".jpg", ".jpeg" }, FileSize = 50 * 1024)]
        public IBrowserFile? Picture { get; set; }
    }
}

Preview the card style

CardUpload components and rendered in card-style band preview mode

Demo

SSR mode

Server Side mode, you can use the IWebHostEnvironment injection service to get to the wwwroot directory and save the file to the images/uploader, which does not require a direct call the controller secondary of MVCSaveToFile method

Wasm mode

It wasn't available in wasm mode, IWebHostEnvironment needed to save files to the server side by calling webapi interface, and so on

Interested students can view their knowledge of Upload components through the wiki in the open source repository related resources of the [The portal]

In this example, server-side verification prompts the file for too much prompt when the file size exceeds 200MB

In this example, the ShowProgress=true display upload progress bar

When you set up IsSingle, you can upload only one image or file

@using BootstrapBlazor.Shared.Samples
@inject IStringLocalizer<Uploads> Localizer
@inject ToastService ToastService
@inject IOptionsMonitor<WebsiteOptions> SiteOptions
@implements IDisposable

<div class="row g-3">
    <div class="col-12">
        <p>@((MarkupString)Localizer["UploadPreCardStyleTips1"].Value)</p>
        <CardUpload TValue="string" ShowProgress="true" OnChange="@OnCardUpload" OnDelete="@(fileName => Task.FromResult(true))"></CardUpload>
    </div>
    <div class="col-12">
        <p>@((MarkupString)Localizer["UploadPreCardStyleTips2"].Value)</p>
        <CardUpload TValue="string" IsSingle="true" OnChange="@OnCardUpload" OnDelete="@(fileName => Task.FromResult(true))"></CardUpload>
    </div>
</div>

@code {
    /// <summary>
    /// Dispose
    /// </summary>
    public void Dispose()
    {
        ReadToken?.Cancel();
        GC.SuppressFinalize(this);
    }

    private CancellationTokenSource? ReadToken { get; set; }

    private static long MaxFileLength => 200 * 1024 * 1024;

    private async Task OnCardUpload(UploadFile file)
    {
        if (file != null && file.File != null)
        {
            // 服务器端验证当文件大于 2MB 时提示文件太大信息
            if (file.Size > MaxFileLength)
            {
                await ToastService.Information(Localizer["UploadsFileMsg"], Localizer["UploadsFileError"]);
                file.Code = 1;
                file.Error = Localizer["UploadsFileError"];
            }
            else
            {
                await SaveToFile(file);
            }
        }
    }

    private async Task<bool> SaveToFile(UploadFile file)
    {
        // Server Side 使用
        // Web Assembly 模式下必须使用 webapi 方式去保存文件到服务器或者数据库中
        // 生成写入文件名称
        var ret = false;
        if (!string.IsNullOrEmpty(SiteOptions.CurrentValue.WebRootPath))
        {
            var uploaderFolder = Path.Combine(SiteOptions.CurrentValue.WebRootPath, $"images{Path.DirectorySeparatorChar}uploader");
            file.FileName = $"{Path.GetFileNameWithoutExtension(file.OriginFileName)}-{DateTimeOffset.Now:yyyyMMddHHmmss}{Path.GetExtension(file.OriginFileName)}";
            var fileName = Path.Combine(uploaderFolder, file.FileName);

            ReadToken ??= new CancellationTokenSource();
            ret = await file.SaveToFileAsync(fileName, MaxFileLength, ReadToken.Token);

            if (ret)
            {
                // 保存成功
                file.PrevUrl = $"images/uploader/{file.FileName}";
            }
            else
            {
                var errorMessage = $"{Localizer["UploadsSaveFileError"]} {file.OriginFileName}";
                file.Code = 1;
                file.Error = errorMessage;
                await ToastService.Error(Localizer["UploadFile"], errorMessage);
            }
        }
        else
        {
            file.Code = 1;
            file.Error = Localizer["UploadsWasmError"];
            await ToastService.Information(Localizer["UploadsSaveFile"], Localizer["UploadsSaveFileMsg"]);
        }
        return ret;
    }
}

The file icon

Icons are displayed in different file formats

Demo

.xls

Test.xls (0 B)

.doc

Test.doc (0 B)

.ppt

Test.ppt (0 B)

.mp3

Test.mp3 (0 B)

.mp4

Test.mp4 (0 B)

.pdf

Test.pdf (0 B)

.cs

Test.cs (0 B)

.zip

Test.zip (0 B)

.txt

Test.txt (0 B)

.dat

Test.dat (0 B)

@using BootstrapBlazor.Shared.Samples
@inject IStringLocalizer<Uploads> Localizer
@inject ToastService ToastService
@inject IOptionsMonitor<WebsiteOptions> SiteOptions
@implements IDisposable

<CardUpload TValue="string" ShowDownloadButton="true" DefaultFileList="@DefaultFormatFileList" OnChange="@OnCardUpload" OnDelete="@(fileName => Task.FromResult(true))"></CardUpload>

@code {
    /// <summary>
    /// Dispose
    /// </summary>
    public void Dispose()
    {
        ReadToken?.Cancel();
        GC.SuppressFinalize(this);
    }

    private List<UploadFile> DefaultFormatFileList { get; } = new List<UploadFile>()
    {
        new UploadFile { FileName = "Test.xls" },
        new UploadFile { FileName = "Test.doc" },
        new UploadFile { FileName = "Test.ppt" },
        new UploadFile { FileName = "Test.mp3" },
        new UploadFile { FileName = "Test.mp4" },
        new UploadFile { FileName = "Test.pdf" },
        new UploadFile { FileName = "Test.cs" },
        new UploadFile { FileName = "Test.zip" },
        new UploadFile { FileName = "Test.txt" },
        new UploadFile { FileName = "Test.dat" }
    };

    private CancellationTokenSource? ReadToken { get; set; }

    private static long MaxFileLength => 200 * 1024 * 1024;

    private async Task OnCardUpload(UploadFile file)
    {
        if (file != null && file.File != null)
        {
            // 服务器端验证当文件大于 2MB 时提示文件太大信息
            if (file.Size > MaxFileLength)
            {
                await ToastService.Information(Localizer["UploadsFileMsg"], Localizer["UploadsFileError"]);
                file.Code = 1;
                file.Error = Localizer["UploadsFileError"];
            }
            else
            {
                await SaveToFile(file);
            }
        }
    }

    private async Task<bool> SaveToFile(UploadFile file)
    {
        // Server Side 使用
        // Web Assembly 模式下必须使用 webapi 方式去保存文件到服务器或者数据库中
        // 生成写入文件名称
        var ret = false;
        if (!string.IsNullOrEmpty(SiteOptions.CurrentValue.WebRootPath))
        {
            var uploaderFolder = Path.Combine(SiteOptions.CurrentValue.WebRootPath, $"images{Path.DirectorySeparatorChar}uploader");
            file.FileName = $"{Path.GetFileNameWithoutExtension(file.OriginFileName)}-{DateTimeOffset.Now:yyyyMMddHHmmss}{Path.GetExtension(file.OriginFileName)}";
            var fileName = Path.Combine(uploaderFolder, file.FileName);

            ReadToken ??= new CancellationTokenSource();
            ret = await file.SaveToFileAsync(fileName, MaxFileLength, ReadToken.Token);

            if (ret)
            {
                // 保存成功
                file.PrevUrl = $"images/uploader/{file.FileName}";
            }
            else
            {
                var errorMessage = $"{Localizer["UploadsSaveFileError"]} {file.OriginFileName}";
                file.Code = 1;
                file.Error = errorMessage;
                await ToastService.Error(Localizer["UploadFile"], errorMessage);
            }
        }
        else
        {
            file.Code = 1;
            file.Error = Localizer["UploadsWasmError"];
            await ToastService.Information(Localizer["UploadsSaveFile"], Localizer["UploadsSaveFileMsg"]);
        }
        return ret;
    }
}

Custom file icon

By setting the IconTemplate parameter and using the FileIcon component, you can further customize the file icon [FileIcon example]

Demo

.xls

Test.xls (0 B)

.doc

Test.doc (0 B)

.ppt

Test.ppt (0 B)

.mp3

Test.mp3 (0 B)

.mp4

Test.mp4 (0 B)

.pdf

Test.pdf (0 B)

.cs

Test.cs (0 B)

.zip

Test.zip (0 B)

.txt

Test.txt (0 B)

.dat

Test.dat (0 B)

@using BootstrapBlazor.Shared.Samples
@inject IStringLocalizer<Uploads> Localizer
@inject ToastService ToastService
@inject IOptionsMonitor<WebsiteOptions> SiteOptions
@implements IDisposable

<CardUpload TValue="string" ShowDownloadButton="true" DefaultFileList="@DefaultFormatFileList" OnChange="@OnCardUpload" OnDelete="@(fileName => Task.FromResult(true))">
    <IconTemplate>
        <FileIcon Extension="@context.GetExtension()">
            <BackgroundTemplate>
                <i class="fa-regular fa-clipboard fa-4x" />
            </BackgroundTemplate>
        </FileIcon>
    </IconTemplate>
</CardUpload>

@code {
    /// <summary>
    /// Dispose
    /// </summary>
    public void Dispose()
    {
        ReadToken?.Cancel();
        GC.SuppressFinalize(this);
    }

    private List<UploadFile> DefaultFormatFileList { get; } = new List<UploadFile>()
    {
        new UploadFile { FileName = "Test.xls" },
        new UploadFile { FileName = "Test.doc" },
        new UploadFile { FileName = "Test.ppt" },
        new UploadFile { FileName = "Test.mp3" },
        new UploadFile { FileName = "Test.mp4" },
        new UploadFile { FileName = "Test.pdf" },
        new UploadFile { FileName = "Test.cs" },
        new UploadFile { FileName = "Test.zip" },
        new UploadFile { FileName = "Test.txt" },
        new UploadFile { FileName = "Test.dat" }
    };

    private CancellationTokenSource? ReadToken { get; set; }

    private static long MaxFileLength => 200 * 1024 * 1024;

    private async Task OnCardUpload(UploadFile file)
    {
        if (file != null && file.File != null)
        {
            // 服务器端验证当文件大于 2MB 时提示文件太大信息
            if (file.Size > MaxFileLength)
            {
                await ToastService.Information(Localizer["UploadsFileMsg"], Localizer["UploadsFileError"]);
                file.Code = 1;
                file.Error = Localizer["UploadsFileError"];
            }
            else
            {
                await SaveToFile(file);
            }
        }
    }

    private async Task<bool> SaveToFile(UploadFile file)
    {
        // Server Side 使用
        // Web Assembly 模式下必须使用 webapi 方式去保存文件到服务器或者数据库中
        // 生成写入文件名称
        var ret = false;
        if (!string.IsNullOrEmpty(SiteOptions.CurrentValue.WebRootPath))
        {
            var uploaderFolder = Path.Combine(SiteOptions.CurrentValue.WebRootPath, $"images{Path.DirectorySeparatorChar}uploader");
            file.FileName = $"{Path.GetFileNameWithoutExtension(file.OriginFileName)}-{DateTimeOffset.Now:yyyyMMddHHmmss}{Path.GetExtension(file.OriginFileName)}";
            var fileName = Path.Combine(uploaderFolder, file.FileName);

            ReadToken ??= new CancellationTokenSource();
            ret = await file.SaveToFileAsync(fileName, MaxFileLength, ReadToken.Token);

            if (ret)
            {
                // 保存成功
                file.PrevUrl = $"images/uploader/{file.FileName}";
            }
            else
            {
                var errorMessage = $"{Localizer["UploadsSaveFileError"]} {file.OriginFileName}";
                file.Code = 1;
                file.Error = errorMessage;
                await ToastService.Error(Localizer["UploadFile"], errorMessage);
            }
        }
        else
        {
            file.Code = 1;
            file.Error = Localizer["UploadsWasmError"];
            await ToastService.Information(Localizer["UploadsSaveFile"], Localizer["UploadsSaveFileMsg"]);
        }
        return ret;
    }
}

Base64 format

use data:image/xxx;base64,XXXXX format data string as PrevUrl value

Demo

Test (0 B)

<CardUpload TValue="string" DefaultFileList="@Base64FormatFileList" IsSingle="true" />

@code {
    private List<UploadFile> Base64FormatFileList { get; } = new List<UploadFile>()
    {
        new UploadFile { FileName = "Test", PrevUrl = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAkCAYAAAD/yagrAAAE60lEQVR4AWJwL/AB9GIWvI0jURz/L1NomZmZP8p9kWNmhnIbKPdomZmZGcJgO7QsWMbce55Yl11t47FbVdKTYpjOr/+H4y4Z/MpYeJVV8KVvokFRylq9osKfVtGQ/NHyPl2CbNVGwau2oOlmgUDJtDJGzxtvvIA3vRH+7IgeA0VtYhQBtKPlToFgC6RY58aggfwLNKhr0Zry2NnPrpIM2YGW2+UBG1IEmdGVJEVXE+hQXt8joKhLjdGVZHd7TSD9DHmT3J1dheroSF4fhnvUVQwbZx9UOnHSzQjkTN0tIG+8hFdbxet4PQOG4WqJwN1hFVb+xUBmCblxvxRkIE+Q+Yf0T31NSrp4/RV4FhHgoSTchQRZBK4D1+Fe2q2g8CYXU6buQyNDaiZKZhn0IYXHVwbkRQydHyawOAGGisa/o3DvI/jF3QKKiuAy+LKs5CvaXMLdeXb35wbkKTjmReDZHysCBosWJqN7r0jZ/VfgXtIlUNQnVpK7D4nNJSC5BHGi1d108Ppr8MxlF0cJqBSyFJaUfUnvHLyO4cttgaI+NhGB7HE0MaSUks/gU5vwe1gv5tfhmUmAhxME8jbIUtiEDus+fhmDJlgCRY0ylZRZhybKWtNinmYlH9NvL5puO3m9UHOkgzb3xuF5HCkDyhYiSwrYVfQPTpYChTc+E35tG9VJBjGFFNmtVlNMDnjzbx0EBpKq1eTeh2awbArBRuHadBWu6WVB4U/NITfuobYoCZl7QL//wDtr+nTmsgzQh2Kwgtz7QAZWFeGw/RI8s94Kigp1PvzZg2i9x11FDtKn/oZCoZdZxhaAXmG4/ohJKHudLE1Gyu66DOfs10BRR5CU3TKQIrtzj9BAkF991dsMslTZEClLsI+jFmANZYFAdAJl9QG03jWH9GrcFh9QTP4Of6GfJGSpsv1J2aoEKRuWCANNJNqOFAaPAW36rVRMCjVf6ZCtqYF2p6Asxg5mWK6tQamY9RCs8z1wF+FxTR5UqYT/3GC7oCkMHcjxKguq6cnl+Egf2whip3C9Yu56jk+GXXOtv1XIa8L1f3AFkHe9az83AmNanwV/bhfa5JKJ3n1slCUL8dk7CNfvVFMfySRThoxbK7fh18tTZXI2QeySLk88IRGsbHkqQj6wUJ72G5CloCXKZrdbLPgVMgVfQMq5m97bfQWOOeVbaK02nSA2ofn2y662UJE47horLZTe38oDjdxQUhmawocxa0OJ5hXjnZE4w1y0uc/iULKGfk+xNuZxI/BnjhFs+THPq4phmTsbeYPXRjFsJJ+NSMlnInHkxrwzGDjR3uBcG1/B/b/TwZkhubb6tP2oVfTAD2G4kw9vYiA2h+zy4GwYxd7S4qGOgd6oqVn6re1DTXiO4e4wPF+yQlF4ZCBfheSPIjJn+ciS/w93qjA6aZYqeQ5D3dTqvuE6GZNTkov5vqsYvLh7j8u1sWWkLIdBQR+q+XdtaKGhJCWBDpkwgSw9gRpKyoNKw6rjCLCDP4yVflSgWFwt3C0HSUo2BTFYX28fVAaWPpDx7wtwjOSSUszawnUT0KTudlfrFQwZ3WNf867CNZQhk/C8kIFUhJLt/O3Jzn62IYNwrUvA8zws4W61CGlDSfugXMz5pJgiSFYyXMYiRXdH4GmyqaR9UHLxzxG41KAwpZxRPN4kRf85Z5I4MvYfFUFGfemJG40AAAAASUVORK5CYII=" },
    };
}

InputUpload

ButtonUpload/CardUpload

AvatarUpload

B station related video link

[portal]

交流群

QQ Group：BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion

Upload

Upload the file by clicking

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

InputUpload

ButtonUpload/CardUpload

AvatarUpload

Bootstrap Blazor Component library updated to 7.4.4-beta01