Template in Blazor File Upload Component

9 Jul 20231 minute to read

The template in the code snippet allows for the customization of how file details are displayed in the uploader’s UI. It provides flexibility to define the structure and styling of individual file elements, such as file name, size, and status. This allows to create a tailored and visually appealing file upload interface that aligns with their application’s design and user experience requirements.

With server-side API endpoint

@using Syncfusion.Blazor.Inputs

<SfUploader ID="Files" AutoUpload="false">
    <UploaderAsyncSettings SaveUrl="https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save"
                           RemoveUrl="https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove"></UploaderAsyncSettings>
    <UploaderTemplates>
        <Template>
            <div class="name file-name" title="@(context.Name)">File Name : @(context.Name)</div>
            <div class="file-size">File Size : @(context.Size)</div>
            <div class="e-file-status">File Status : @(context.Status)</div>
        </Template>
    </UploaderTemplates>
</SfUploader>

Without server-side API endpoint

@using Syncfusion.Blazor.Inputs

<SfUploader ID="Files" AutoUpload="false">
    <UploaderTemplates>
        <Template>
            <div class="name file-name" title="@(context.Name)">File Name : @(context.Name)</div>
            <div class="file-size">File Size : @(context.Size)</div>
            <div class="e-file-status">File Status : @(context.Status)</div>
        </Template>
    </UploaderTemplates>
</SfUploader>