Adding preloaded files to file upload component not working with a foreach loop, but works fine when adding simple <UploaderUploadedFiles> tags.

[Hit Man]

Sorry for my poor english.

I want to peload files, but they not show on the control if I add <UploaderUploadedFiles> tags with a foreach loop.

• This is my code not working.

<SfDialog Width="400px" AllowPrerender=true ShowCloseIcon="true" IsModal="true" @bind-Visible="@IsImageDialogVisible">

    <DialogTemplates>

        <Header> Modifier les images de produit </Header>

        <Content>

            <SfUploader @ref="SfUploader" AllowedExtensions=".jpg, .jpeg, .png, .gif, .bmp, .heif, .heic">

                <UploaderEvents OnRemove=OnFileRemove ValueChange="OnImageUploaderChangeHandler"></UploaderEvents>

                <UploaderFiles>

                    @foreach (var img in ProductCommand!.ProductImages!)

                    {

                        <UploaderUploadedFiles Name="@Path.GetFileNameWithoutExtension(img.Name)" [email protected](img.Base64Data).Length Type="@Path.GetExtension(img.Name)"></UploaderUploadedFiles>

                    }

                </UploaderFiles>

            </SfUploader>

        </Content>

    </DialogTemplates>

</SfDialog>

• This code works

<SfDialog Width="400px" AllowPrerender=true ShowCloseIcon="true" IsModal="true" @bind-Visible="@IsImageDialogVisible">

    <DialogTemplates>

        <Header> Modifier les images de produit </Header>

        <Content>

            <SfUploader @ref="SfUploader" AllowedExtensions=".jpg, .jpeg, .png, .gif, .bmp, .heif, .heic">

                <UploaderEvents OnRemove=OnFileRemove ValueChange="OnImageUploaderChangeHandler"></UploaderEvents>

                <UploaderFiles>

                        <UploaderUploadedFiles Name="image" Size=5000 Type=".png"></UploaderUploadedFiles>

                </UploaderFiles>

            </SfUploader>

        </Content>

    </DialogTemplates>

</SfDialog>

[UdhayaKumar Duraisamy]

You can append the preloaded file to the UploaderUploadedFiles property using a foreach loop, as shown in the code snippet below.

@page "/"

 

@using Syncfusion.Blazor.Popups

@using Syncfusion.Blazor.Inputs

@using Syncfusion.Blazor.Buttons

 

<SfDialog Width="400px" AllowPrerender=true ShowCloseIcon="true" IsModal="true" @bind-Visible="@IsImageDialogVisible">

    <DialogTemplates>

        <Header> Modifier les images de produit </Header>

        <Content>

            <SfUploader @ref="uploadObj" AllowedExtensions=".jpg, .jpeg, .png, .gif, .bmp, .heif, .heic">

                <UploaderEvents OnRemove=OnFileRemove ValueChange="OnImageUploaderChangeHandler"></UploaderEvents>

                <UploaderFiles>

                    @foreach (var file in data_list)

                    {

                        <UploaderUploadedFiles Name="@file.Name" Size[email protected] Type="@file.Type"></UploaderUploadedFiles>

                    }

                </UploaderFiles>

            </SfUploader>

        </Content>

    </DialogTemplates>

</SfDialog>

 

<SfButton OnClick="OpenDialog" Content="Show Dialog"></SfButton>

@code{

    public SfUploader uploadObj { get; set; }

    public bool IsImageDialogVisible = false;

    public class FilesData

    {

        public string Name { get; set; }

        public double Size { get; set; }

        public string Type { get; set; }

    }

    List<FilesData> data_list = new List<FilesData>()

        {

            new FilesData { Name = "File1", Size = 500000 , Type = ".png" },

            new FilesData { Name = "File2", Size = 12000 , Type = ".jpg" },

            new FilesData { Name = "File3", Size = 1024, Type = ".gif" }

        };

    public void OpenDialog()

    {

        IsImageDialogVisible = true;

    }

    public void OnFileRemove(RemovingEventArgs args)

    {

        args.PostRawFile = false;

    }

    public void OnImageUploaderChangeHandler()

    {

       

    }

}

<style>

    html,body

    {

        height: 100%;

    }

</style>