Custom Template

[Unknown]

I'm using a file uploader with a custom template. My problem is, when I do, I lose the basic file information from the control, such as file name, size, etc. My question is, how do I keep the information the upload control would normally display, but also add my custom controls to the UI?

Here is what my UI looks like (see, no file name, size, etc):

Here is my code:

<SfUploader ID="files" SequentialUpload="true" AutoUpload="false">

    <UploaderAsyncSettings SaveUrl="my url" RemoveUrl="my url" ChunkSize="500000" RetryCount="5" RetryAfterDelay="3000">

    </UploaderAsyncSettings>

    <UploaderEvents BeforeUpload="OnBeforeUpload"></UploaderEvents>

    <UploaderTemplates>

        <Template>

            <div class="form-group">

                <label for="testA">Test A</label>

                <input id="testA" @bind-value="@TestA" type="text" class="form-control" placeholder="Enter something" />

            </div>

            <div class="form-group">

                <label for="testB">Test B</label>

                <input id="testB" @bind-value="@TestB" type="text" class="form-control" placeholder="Enter something" />

            </div>

        </Template>

    </UploaderTemplates>

</SfUploader>

@code {

    public string TestA { get; set; }

    public string TestB { get; set; }

    private void OnBeforeUpload(BeforeUploadEventArgs e)

    {

        e.CustomFormData = new[]

        {

            new { name="TestA", value=TestA },

            new { name="TestB", value=TestB }

        };

    }

}

[Sevvandhi Nagulan]

Hi Martin, 

Greetings from Syncfusion support. 

We checked the reported requirement. We would like to inform you that, you can get the file details such as file name, and size from the context variable that can be accessed in the UploaderTemplate. Refer to the code and sample, 

<SfUploader ID="files" SequentialUpload="true" AutoUpload="false"> 

    <UploaderAsyncSettings SaveUrl="https://localhost:44394/api/SampleData/Save" RemoveUrl="https://localhost:44394/api/SampleData/Remove" ChunkSize="500000" RetryCount="5" RetryAfterDelay="3000"> 

    </UploaderAsyncSettings> 

    <UploaderEvents BeforeUpload="OnBeforeUpload"></UploaderEvents> 

    <UploaderTemplates> 

        <Template> 

            <div class="name file-name" title="@(context.Name)">@(context.Name)</div> 

            <div class="file-size">@(context.Size)</div> 

            <div class="e-file-status">@(context.Status)</div> 

            <div class="form-group"> 

                <label for="testA">Test A</label> 

                <input id="testA" @bind-value="@TestA" type="text" class="form-control" placeholder="Enter something" /> 

            </div> 

            <div class="form-group"> 

                <label for="testB">Test B</label> 

                <input id="testB" @bind-value="@TestB" type="text" class="form-control" placeholder="Enter something" /> 

            </div> 

        </Template> 

    </UploaderTemplates> 

</SfUploader> 

Please find the sample below, 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Upload_Template-1892163329 

Kindly check the sample and get back to us if you need any other further assistance. 

Regards, 

Sevvandhi N 

[Unknown]

That works perfectly. Thank you!

[Sevvandhi Nagulan]

Hi Martin,

We are glad to hear that our solution got worked. Please get back to us if you have any queries.

Regards,
Sevvandhi N