How to delete files after uploading in Blazor File Upload?

[Syncfusion Support]

Answer:

We can upload or delete the files manually using our assyncSettings property. please add the RemoveUrl in your application to remove the selected files in your applications.

[index.razor]

@inherits IndexBase

@using System.IO

@page "/"

@using Syncfusion.Blazor.Inputs

<EditForm id="StepEdit" Model="@ViewModel" OnValidSubmit="@HandleValidSubmit" Context="EditFormContext">

<DataAnnotationsValidator />

<SfUploader @ref="UploadObj" ID="UploadFiles" AllowedExtensions=".pdf,.PDF" AutoUpload="false">

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

SfUploader>

<button type="submit" class="btn btn-primary">Submitbutton>

EditForm>

@code {

SfUploader UploadObj;

private void OnChange(UploadChangeEventArgs args)

{

foreach (var file in args.Files)

{

var path = "wwwroot" + $@"\Data\" + file.FileInfo.Name;

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

file.Stream.WriteTo(filestream);

filestream.Close();

file.Stream.Close();

}

}

public async Task HandleValidSubmit()

{

await this.UploadObj.Upload(); // Upload the selected file manually

}

}

[index.razor.cs]

public void OnRemove(RemovingEventArgs args)

{

var fileName = args.FilesData[0].Name;

//Workaround for deleting previously uploaded documents.

//Sometimes the file extension appears twice in the document's filename.

if (fileName.Contains(".pdf.pdf"))

{

fileName = fileName.Substring(0, fileName.Length - 4);

}

var filePath = "wwwroot" + $@"\Data\" + fileName;

if (System.IO.File.Exists(filePath))

{

System.IO.File.Delete(filePath);

}

var removedDokument = ViewModel.UploadedDocuments.Where(a => a.Name.Equals(fileName)).FirstOrDefault();

if (removedDokument != null)

{

ViewModel.UploadedDocuments.Remove(removedDokument);

}

InvokeAsync(StateHasChanged);

}

}

Find the sample to delete files after uploading in Blazor File Upload from here.

[À la mode Clothing Outlet]

Hi. Please demonstrate this with RemoveAsync(), to remove a specific selected file not to remove all files in the list

[Yohapuja Selvakumaran]

Hi Team,

Thank you for reaching out to us with your query regarding removing specific files from the SfUploader in your Blazor application. Below is a sample implementation that demonstrates how you can manage uploaded files and remove a specific file programmatically:

• Use a List<string> (uploadedFileNames) to store the names of successfully uploaded files.

• The SuccessHandler method adds file names to this list upon successful upload.

• The RemoveFile method removes a specified file by creating a FileInfo object and calling the RemoveAsync method. After removing, the file name is also removed from the uploadedFileNames list.

• The ClickHandler method removes the first file in the uploadedFileNames list when the button is clicked

Code Snippet:

 public void RemoveFile(string fileName)

    {

        if (!string.IsNullOrEmpty(fileName) && uploadedFileNames.Contains(fileName))

        {

            // Create a FileInfo object for the file to be removed

            var fileInfo = new FileInfo { Name = fileName };

 

            // Call RemoveAsync with the file info

            UploadObj.RemoveAsync(new FileInfo[] { fileInfo });

 

            // Remove the file name from the list

            uploadedFileNames.Remove(fileName);

        }

    }

 

    // Method to trigger the removal of the first file in the list

    public void ClickHandler()

    {

        if (uploadedFileNames.Count > 0)

        {

            // Get the first file name

            string fileNameToRemove = uploadedFileNames[0];

 

            // Remove the file

            RemoveFile(fileNameToRemove);

        }

    }

 

    public void SuccessHandler(SuccessEventArgs args)

    {

        if (args.File != null)

        {

            // Add the file name to the list

            uploadedFileNames.Add(args.File.Name);

        }

    }

Please find the below sample for your reference,

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

We hope this implementation resolves your query. Please feel free to reach out if you need any further assistance.



Regards,

Yohapuja S