Giter Club home page Giter Club logo

Comments (3)

akorchev avatar akorchev commented on June 25, 2024

Check RadzenFileUpload. It supports that already.

from radzen-blazor.

0xor1 avatar 0xor1 commented on June 25, 2024

maybe I'm missing something super obvious but the existing one only seems to support a single file and requires binding individual properties for file name and file size:

        /// <summary>
        /// Gets or sets the image file name.
        /// </summary>
        /// <value>The image file name.</value>
        [Parameter]
        public string FileName { get; set; }

        /// <summary>
        /// Gets or sets the FileName changed.
        /// </summary>
        /// <value>The FileName changed.</value>
        [Parameter]
        public EventCallback<string> FileNameChanged { get; set; }

        /// <summary>
        /// Gets or sets the image file size.
        /// </summary>
        /// <value>The image file size.</value>
        [Parameter]
        public long? FileSize { get; set; }

        /// <summary>
        /// Gets or sets the FileSize changed.
        /// </summary>
        /// <value>The FileSize changed.</value>
        [Parameter]
        public EventCallback<long?> FileSizeChanged { get; set; }

wouldn't it be more flexible and generic to have the value as List<IBrowserFile> Value and enable support to toggle multiple file selection? the existing implementation seems to be pretty hardcoded to a single file I've tried this in the examples on the docs page and it doesn't pick up the multiple selected files when I try:

@using RadzenBlazorDemos.Data
@using RadzenBlazorDemos.Models.Northwind

@inherits DbContextPage

<div class="container-fluid">
    <div class="row px-3">
        <div class="col-lg-6 offset-lg-3 p-3">
            <RadzenCard>
            <RadzenFileInput @bind-Value=@files TValue="List<IBrowserFile>" class="w-100" 
                Change=@OnChange Error=@(args => OnError(args, "FileInput")) InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "select file" }, { "multiple", true }})"/>
            </RadzenCard>
        </div>
    </div>
</div>

<EventConsole @ref=@console />

@code {
    List<IBrowserFile> files = new ();
    EventConsole console;

    string fileName;
    long? fileSize;

    void OnChange(List<IBrowserFile> value)
    {
        console.Log($"value: {value?.ToString()} files: {files?.ToString()}");
        console.Log($"value: {value?.Count} files: {files?.Count}");
    }

    void OnError(UploadErrorEventArgs args, string name)
    {
        console.Log($"{args.Message}");
    }
}

from radzen-blazor.

akorchev avatar akorchev commented on June 25, 2024

Check the online demos for RadzenFileUpload (the client-side upload).

from radzen-blazor.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.