I want to read files and add them to the SfUploader

[Nandor Kalmanchey]

I have a webapge where Users can make orders and also can attach files. I store the files path's in a database table so what I want is that when they edit they order (so they open the same order later), I want to add the files to the sfUploader, so they could download it or delete it. So I need to read the files from the path, and add them somehow to the uploader.

Thanks for your help!

[Priyanka Karthikeyan]

Hi Nandor Kalmanchey,

After uploading a file, you can retrieve the file details and path on the server side. Save this information as a path in your database. To enable users to download the uploaded files, consider adding a download icon to each file entry in your list. Utilize template support and implement a click event to trigger the download action, as demonstrated in the code snippet below:

[index.razor] 

@using Syncfusion.Blazor.Inputs 

@using System.IO 

 

 

<SfUploader ID="UploadFiles"> 

    <UploaderTemplates> 

        <Template> 

            <span class='name file-name'>@(context.Name)</span> 

            <span class='file-size'>@(context.Size) bytes</span> 

            <span class="upload-status">@(context.Status)</span> 

            <span class="fa fa-download" title="Download" @onclick="@(e => OnClick(e, context.Name))"></span> 

        </Template> 

    </UploaderTemplates> 

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

        } 

Furthermore, if there is a possibility that we misunderstood your requirement, we would greatly appreciate it if you could provide us with further information about your scenario. This will help us align our understanding with your expectations and provide you with the best possible assistance.

Regards,

Priyanka K

Attachment: BlazorApp1_(13)_7a1b078a.zip