BzUploader

Uploader

Five different looks

Dropzone

The default look: a drag-and-drop area. OnFilesChanged hands you the file list.

File count: 0

razor
@using BzCore.Components.Uploader
@using BzCore.Enums

<BzUploader Variant="BzUploaderVariant.Dropzone"
            Multiple
            MaxSizeMB="10"
            OnFilesChanged="@(f => _count = f.Count)" />

<p>تعداد فایل: @_count</p>

@code {
    private int _count;
}
The five variants

All five share one snippet; only Variant changes.

Compact
Button
Avatar
Gallery
Variant Use for
DropzoneA large drag-and-drop area (default)
CompactThe same dropzone in a tight space
ButtonJust a button, for inside forms
AvatarA profile picture, single file
GallerySeveral images with previews
razor
@using BzCore.Components.Uploader
@using BzCore.Enums

@* Only Variant changes between these. *@
<BzUploader Variant="BzUploaderVariant.Compact" Title="بارگذاری" Hint="کلیک یا کشیدن" />
<BzUploader Variant="BzUploaderVariant.Button"  ButtonText="انتخاب فایل ها" />
<BzUploader Variant="BzUploaderVariant.Avatar"  Multiple="false" Accept="image/*" />
<BzUploader Variant="BzUploaderVariant.Gallery" Accept="image/*" />
Limits and reading files

Constrain the input with MaxSizeMB, MaxFiles and Accept, then save the files on the server.

Parameter Default Description
MultipletrueAllow several files
MaxSizeMB10Max size per file
MaxFiles20Max number of files
AcceptAllowed extensions or MIME types
OnFilesChangedIReadOnlyList<BzUploadFile>
razor
@using BzCore.Components.Uploader
@using BzCore.Enums

<BzUploader Variant="BzUploaderVariant.Dropzone"
            Multiple
            MaxSizeMB="2"
            MaxFiles="3"
            Accept=".pdf,.docx"
            Title="فقط PDF و Word"
            Hint="حداکثر 3 فایل، هرکدام تا 2 مگابایت"
            OnFilesChanged="OnFiles" />

@if (_names.Count > 0)
{
    <p>@string.Join(" | ", _names)</p>
}

@code {
    private List<string> _names = new();

    private async Task OnFiles(IReadOnlyList<BzUploadFile> files)
    {
        _names = files.Select(f => f.Name).ToList();

        // Saving to disk — always re-check the limit on the server too.
        foreach (var f in files)
        {
            var path = Path.Combine("uploads", f.Name);
            await using var target = File.Create(path);

            // f.File is the underlying IBrowserFile.
            await using var source = f.File.OpenReadStream(2 * 1024 * 1024);
            await source.CopyToAsync(target);
        }
    }
}

@*
BzUploadFile members:
    string  Name          file name
    long    Size          size in bytes
    string  ContentType   MIME type
    bool    IsImage       true when ContentType starts with image/
    string? PreviewUrl    preview for image variants
    IBrowserFile File     the raw Blazor file, for reading the stream
*@