Completed
Last Updated: 04 Jul 2023 14:03 by ADMIN
Release 4.4.0 (07/19/2023) (R3 PI1)
Emran
Created on: 22 Sep 2020 04:45
Category: Upload
Type: Feature Request
18
Initial files in Blazor Upload and FileSelect

Like in the Kendo Upload https://docs.telerik.com/kendo-ui/api/javascript/ui/upload/configuration/files - I want to show some files initially to my user

=====

ADMIN EDIT:

A possible workaround is to use a ListView and mimic the Upload/FileSelect interface:

<TelerikUpload SaveUrl="api/upload/save"
               RemoveUrl="api/upload/remove">
</TelerikUpload>

@{
    if (OldFiles.Any())
    {
        <p>Older files:</p>

        <div class="k-upload">
            <ul class="k-upload-files k-reset">
                <TelerikListView Data="@OldFiles" @ref="@ListView">
                    <Template>
                        <li class="k-file k-file-success">
                            <div class="k-file-single">
                                <span class="k-file-group-wrapper">
                                    <span class="k-file-group k-icon k-i-file"></span>
                                </span>
                                <span class="k-file-name-size-wrapper">
                                    <span class="k-file-name " title="@context.Name"> @context.Name </span>
                                    <span class="k-file-validation-message k-text-success">Existing file.</span>
                                </span>
                                <span class="k-upload-status">
                                    <TelerikButton ButtonType="@ButtonType.Button" Title="Remove"
                                                   OnClick="@( _ => RemoveOldFile(context) )"
                                                   Icon="x" FillMode="@ThemeConstants.Button.FillMode.Flat" />
                                </span>
                            </div>
                        </li>
                    </Template>
                </TelerikListView>
            </ul>
        </div>
    }
}

@code {
    TelerikListView<UploadedFile> ListView { get; set; }

    List<UploadedFile> OldFiles { get; set; } = new List<UploadedFile>()
    {
        new UploadedFile() { Id = 1, Name = "foo.txt" },
        new UploadedFile() { Id = 2, Name = "bar.txt" },
    };

    async Task RemoveOldFile(UploadedFile file)
    {
        // delete the file from the remote server...
        // ...
 
        // update the client UI
        OldFiles.Remove(file);
        ListView.Rebind();
    }

    public class UploadedFile
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}

0 comments