Template for UploaderUploadedFiles

[Galvin Nguyen]

Can we have template support for UploaderUploadedFiles? For example, I want to edit a product that having multiple images. When I open the dialog to edit that product, the file uploader will need to display current images of that product (with preview) in UploaderUploadedFiles tag.

[Kokila Poovendran]

Hi Galvin Nguyen,

Thank you for reaching out to us.

We understand that you're looking for template support for the UploaderUploadedFiles component to display current images of a product with previews when editing that product. Your requirement is indeed feasible with the file uploader component, and we're here to guide you through the process.

We've created a simple sample demonstrating the template support for preloaded files in the file uploader component. You can access the sample through the following link:

Sample: https://blazorplayground.syncfusion.com/rDrJDKMIhpWVMUTc

In this sample, we've utilized the UploaderTemplates component to define a template for displaying file names and sizes. Additionally, we've populated the UploaderFiles component with preloaded files, which can be substituted with the current images of the product you're editing.

Below is the code snippet for your reference:

@using Syncfusion.Blazor.Inputs

@using Syncfusion.Blazor.Buttons

 

 

<SfUploader ID="UploadFiles">

    <UploaderTemplates>

        <Template>

            <span class='name file-name'>@(context.Name)</span>

            <span class='file-size'>@(context.Size) bytes</span>

        </Template>

    </UploaderTemplates>

    <UploaderFiles>

        <UploaderUploadedFiles Name="Nature" Size=500000 Type=".png"></UploaderUploadedFiles>

        <UploaderUploadedFiles Name="TypeScript Succinctly" Size=12000 Type=".pdf"></UploaderUploadedFiles>

        <UploaderUploadedFiles Name="ASP.NET Webhooks" Size=500000 Type=".docx"></UploaderUploadedFiles>

    </UploaderFiles>

</SfUploader>

 

<style>

    .name.file-name, .file-size {

        display:block;

        padding: 5px;

    }

</style>

 

@code {

 

    SfUploader uploaderObj;

 

    List<UploaderUploadedFiles> file = new List<UploaderUploadedFiles>();

   

}

Please feel free to customize the template and file list as per your requirements. You can replace the static file entries with dynamic data representing the current images of the product being edited.

We hope this solution fulfills your needs. Should you have any further questions or require assistance, please don't hesitate to ask.