Update UploderFiles at runtime

[Christoph]

Hi,

we would like to update the file list at runtime - tried all functions of SfUploader but none has any effect on the visual file list. ( also tested suggestions from https://www.syncfusion.com/forums/175654/display-uploaded-files-using-a-parameter-in-sfuploader but doesnt work at runtime )

our use case is to show the existing file in the file list, so the user can delete it there - this entry has to be added / updated on button click

[Sureshkumar P]

Hi Christoph,

Thank you for reaching out to us regarding the issue you are experiencing with the dynamic support not working when updating the preload files in the component. You can try using conditional rendering to initialize the component. This may resolve the issue you are experiencing.

Find the code example here:

<div class="dropElement">

 

    @if (files != null)

    {

        <SfUploader AutoUpload="false" DropArea=".dropElement">

            <UploaderFiles>

                @if (files != null && files.Count > 0)

                {

                    @foreach (var item in files)

                    {

                        <UploaderUploadedFiles Name="@item.Name" Size=@item.size Type="@item.type"></UploaderUploadedFiles>

                    }

 

                }

            </UploaderFiles>

            <UploaderEvents ValueChange="OnChange"></UploaderEvents>

        </SfUploader>

    }

</div>

 

@code {

    public List<FileList> files { get; set; }

 

    public class FileList

    {

        public string Name { get; set; }

        public double size { get; set; }

        public string type { get; set; }

    }

 

    protected override void OnInitialized()

 

    {

 

        this.files = new List<FileList>()

        {

            new FileList() { Name = "Chocolate", size=500000, type= ".pdf" },

            new FileList() { Name = "Chocolate2", size=500000, type= ".pdf" },

        };

 

        base.OnInitialized();

 

    }

 

    private void OnChange(UploadChangeEventArgs args)

    {

        foreach (var file in args.Files)

        {

            var path = @"path" + file.FileInfo.Name;

            FileStream filestream = new FileStream(path, FileMode.Create, FileAccess.Write);

            file.Stream.WriteTo(filestream);

            filestream.Close();

            file.Stream.Close();

        }

    }

}

Regards,

Sureshkumar P

[Christoph]

well this doesnt work - it only works if you do it in OnInitialized but i need to update it on runtime​

Attachment: SfUploader_48d339b1_a77e42a0.zip

if you click on the button, its added to list but SfUploader is not updated

[Sureshkumar P]

Christoph, As mentioned in our previous update, the preload feature does not support the dynamic updating of files. This is the default behavior of the component.

[Christoph]

we notice that it can achived by using CreateFileList - here is an example

<button onclick="@AddEntry">Add Entry</button>
<button onclick="@Clear">Clear</button>

<SfUploader @ref="_uploader" />

@code{
private readonly List<FileInfo> _files = new();
private SfUploader _uploader;


private async Task AddEntry()
{
_files.Add( new FileInfo()
{
Name = $"Added {DateTime.Now.Ticks}",
Status = "File uploaded successfully",
ValidationMessages = new ValidationMessages()
});


await _uploader.CreateFileList( _files.ToArray() );
}


private async Task Clear()
{
_files.Clear();
await _uploader.ClearAll();
}
}

note: Status is not required for FileInfo but has be to one of the following:

File failed to upload,

Ready to upload,

default is: File type is not allowed

other status can be achived by setting size to <min or >max

[Shereen Shajahan]

Glad to know the issue has been resolved. Please get back to us for further assistance.