Download Files using File Upload

Question

With the File Upload component, I display a list of preloaded files. I would like to be able to click on file/row to call a method to download the file. I don't see a File Upload event that executes on click passing the FileInfo argument.

Berly Christopher · Accepted Answer

Hi George,

Greetings from Syncfusion support.

We have achieved the requested requirement with help of template concept. Kindly refer the below code example.

[index.razor]

@using Syncfusion.Blazor.Inputs

@using System.IO

<SfUploader ID="UploadFiles">

<UploaderTemplates>

<Template>

@(context.Name)

@(context.Size) bytes

@(context.Status)

OnClick(e, context.Name))">

</Template>

</UploaderTemplates>

<UploaderFiles>

<UploaderUploadedFiles Name="Nature" Size=500000 Type=".png"></UploaderUploadedFiles>

<UploaderUploadedFiles Name="TypeScript Succinctly" Size=12000 Type=".pdf"></UploaderUploadedFiles>

<UploaderUploadedFiles Name="ASP.NET Webhooks" Size=500000 Type=".docx"></UploaderUploadedFiles>

</UploaderFiles>

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

</SfUploader>

@code {

SfUploader uploaderObj;

[Inject]

protected IJSRuntime JsRuntime { get; set; }

List<UploaderUploadedFiles> file = new List<UploaderUploadedFiles>();

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();

}

private void onRemove(RemovingEventArgs args)

{

foreach (var removeFile in args.FilesData)

{

if (File.Exists(Path.Combine(@"rootPath", removeFile.Name)))

{

File.Delete(Path.Combine(@"rootPath", removeFile.Name));

}

public async Task OnClick(MouseEventArgs e, string filename)

{

await JsRuntime.InvokeVoidAsync("onUpload", "UploadFiles", filename);

}

[wwwroot/upload.js]

window.onUpload = (id, filename) => {

let url = "https://localhost:44394/api/SampleData/Download?filename=" + filename;

window.location.rel='nofollow' href = url;

};

[Data/SampleData/Download]

[HttpGet("[action]")]

public FileResult Download(string filename)

{

var filePath = Path.Combine(

Directory.GetCurrentDirectory());

IFileProvider provider = new PhysicalFileProvider(filePath);

IFileInfo fileInfo = provider.GetFileInfo(filename);

var readStream = fileInfo.CreateReadStream();

var mimeType = "application/pdf";

return File(readStream, mimeType, filename);

}

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Pre_load_Download_file_162986-238647673

Regards,

Berly B.C

George Franklin · Answer

Thanks

À la mode Clothing Outlet · Answer

Hi. I have a similar situation, although I want to use the multi-format-viewer demo in my project. I have a section that shows a preloaded document: Of which when I press "View License" i have a pop up dialog on which I wish to display the license. How do I download or read this preloaded file from my desktop? @if (driver.UploadedLicense) { } * Document will be saved with as '@driver.Id' @if (driver.UploadedLicense){ }

Yohapuja Selvakumaran · Answer

Hi George Franklin,Based on the information provided, it appears that you are looking to facilitate file downloads using the Syncfusion Blazor File Upload component. The File Upload component is primarily designed for uploading files. However, you can incorporate a download button within the file list using the Template feature, which allows users to download files from the server based on the file name. Please refer to the below shared code snippet and sample for more information.[Razor] @using Syncfusion.Blazor.Inputs@using System.IO@inject HttpClient Http

Syncfusion Blazor File Upload - Demo of File Upload and Download

@code { public SfUploader UploaderObj { get; set; } public void BeforeRemovehandler(BeforeRemoveEventArgs args) { args.PostRawFile = false; } public async Task DeleteFile(Syncfusion.Blazor.Inputs.FileInfo fileData) { await UploaderObj.RemoveAsync(new Syncfusion.Blazor.Inputs.FileInfo[] { fileData }); }} [Controller] [HttpPost("[action]")] public void Remove(string UploadFiles) // Delete the uploaded file here { if (UploadFiles != null) { var filePath = Path.Combine(uploads, UploadFiles); if (System.IO.File.Exists(filePath)) { //Delete the file from server System.IO.File.Delete(filePath); } } } [HttpGet("[action]")] public FileResult Download(string filename) { var filePath = Path.Combine(Directory.GetCurrentDirectory() + "\Uploaded Files"); IFileProvider provider = new PhysicalFileProvider(filePath); IFileInfo fileInfo = provider.GetFileInfo(filename); var readStream = fileInfo.CreateReadStream(); var mimeType = "application/pdf"; return File(readStream, mimeType, filename); } Code Explanation:The UploaderTemplates section uses a custom template to display the uploaded files.A download button is added within the file list, which triggers the file download from the server.The DeleteFile method handles the deletion of uploaded files.The Remove action deletes files from the server.The Download action returns the file as a FileResult for downloading.Note:The file download functionality is separate from the file upload component. The download method is a standalone function and is not a built-in feature of the Syncfusion File Uploader.You can customize the Download method according to your specific requirements. The current implementation is a basic example to demonstrate the functionality.Ensure that the file path in the Download method correctly points to the directory where the uploaded files are stored. Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor-Upload-And-Download796410024Regards,Yohapuja S