dynamically add UploaderUploadedFiles

[junghwi]

After uploading files to a specific location using SfUploader, the list of uploaded files was saved in db. I want to import the saved list later and create the list again. Is there a way to dynamically add UploaderUploadedFiles?

Also, is it possible to create a file list in the form of the table below based on the data we separately saved?

[Kokila Poovendran]

Hi junghwi,

Greetings from Syncfusion Support!

Query 1: Is there a way to dynamically add UploaderUploadedFiles?

Yes, you can dynamically add files to the SfUploader component using the UploadAsync method. This method allows you to upload files programmatically. Here is the API reference for more details: UploadAsync Method.

Query 2: Is it possible to create a file list in the form of a table?

Yes, you can display the uploaded file items in a table format using the Template property of the SfUploader. This allows you to customize how the file list is rendered. For more information on using templates, please refer to the documentation here: Template Documentation.

You can also view a sample implementation here: Sample Link.

If you have any further questions or need additional assistance, feel free to reach out.

[junghwi]

After uploading the file, the uploaded list is saved in the DB, and when selecting the grid, the saved file list must be retrieved again to create a list. (Download must also be possible. The screen structure we want is as shown in the image below.)

However, when I use UploadAsync in the code you sent, it looks like it is uploading again, and an error occurs.

Can't you just create a list without uploading the file?

[junghwi]

Hello.

I am asking again because I have not received an answer to the question above.

Can I just create a list without uploading files?

[Kokila Poovendran]

Hi junghwi,

Thank you for reaching out and sorry for any inconvenience you are experiencing. We understand you want to display files stored in the database within the uploader when selecting a grid, without uploading them again.

We have created a simple sample that demonstrates how to display preloaded files dynamically. You can find the code snippet below:

            <SfUploader @ref="Uploader" ShowFileList="true" AutoUpload="false" AllowedExtensions=".txt,.pdf,.jpg,.png">

                <UploaderFiles>

                    @foreach (var file in PreloadedFiles)

                    {

                        <UploaderUploadedFiles Name="@file.Name" Size="@file.Size" Type="@file.Type" />

                    }

                </UploaderFiles>

            </SfUploader>

@code {

    private SfDialog UploaderDialog;

    private SfUploader Uploader;

    public class FileDetail

    {

        public string Name { get; set; }

        public long Size { get; set; }

        public string Type { get; set; }

    }

    // This will hold the files for the uploader

    private List<FileDetail> PreloadedFiles = new List<FileDetail>

    {

        new FileDetail { Name = "MyFile2", Size = 500000, Type = ".png" },

        new FileDetail { Name = "MyFile1", Size = 600000, Type = ".png" }

    };

   

   

}

Sample: https://blazorplayground.syncfusion.com/embed/LjVztltwsQZyPJoG?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

In this example, we load a list of files into the component as preloaded files. Please review the sample to see if it meets your requirements. If it doesn't, feel free to reach out to us for further assistance.

[junghwi]

Thank you for your answer.

However, it doesn't work as I want.

The functions I want are

1. After uploading a file, the list is displayed as in the image,

2. When selecting a list in the grid, the corresponding file list is displayed, and the file can be added to the list again.

This is the basic function I want to create.

If there is any source material that can be referenced, or if there are similar answers to previous questions, please let me know.

[junghwi]

Hello.

When can I get an answer to this question??

(It's not easy to make it custom.)

[Buvana Sathasivam]

Hi junghwi,

We understand that you want to display a list of uploaded files in a grid and be able to select an item from this list to see and re-add the file to the list.

To help you achieve this, we’ve created a basic sample demonstrating the functionality. In the sample, we show a table with user details and, upon selecting a user, a corresponding table displays their uploaded files with options to download them.

Here's a simplified example of how you can implement this:

<table class="table">
    <thead>
    <tr>
        <th>No.</th>
        <th>User Name</th>
        @*<th>Number of Files</th>*@
    </tr>
    </thead>
    <tbody>
    @foreach (var user in Users)
    {
    <tr @onclick="() => OnUserSelected(user)" style="cursor:pointer;">
        <td>@user.Id</td>
        <td>@user.UserName</td>
        @*<td>@user.Files.Count</td>*@
    </tr>
    }
    </tbody>
</table>

@if (SelectedUser != null)
{
<h4>@SelectedUser.UserName's Files</h4>

<!-- Table to show the selected user's files -->
<table class="table">
    <thead>
    <tr>
        <th>Size (KB)</th>
        <th>File Name</th>
        <th>Extension</th>
        <th>Download</th>
    </tr>
    </thead>
    <tbody>
    @foreach (var file in SelectedUser.Files)
    {
    <tr>
        <td>@file.Size</td>
        <td>@file.FileName</td>
        <td>@file.Extension</td>
        <td>
            <button @onclick="() => DownloadFile(file)">Download</button>
        </td>
    </tr>
    }
    </tbody>
</table>
}

@code {
    private List<User> Users = new();
    private User SelectedUser;

    protected override void OnInitialized()
    {
        // Initialize local data for the users and their files
        Users = new List<User>
        {
            new User
            {
                Id = 1,
                UserName = "User1",
                Files = new List<FileUploadInfo>
                {
                    new FileUploadInfo { FileName = "Screenshot_2023", Extension = "jpg", Size = 512 },
                    new FileUploadInfo { FileName = "Document", Extension = "pdf", Size = 1024 },
                    new FileUploadInfo { FileName = "Report", Extension = "xlsx", Size = 2048 }
                }
            },
            new User
            {
                Id = 2,
                UserName = "User2",
                Files = new List<FileUploadInfo>
                {
                    new FileUploadInfo { FileName = "Presentation", Extension = "pptx", Size = 1024 },
                    new FileUploadInfo { FileName = "Notes", Extension = "txt", Size = 256 }
                }
            },
            new User
            {
                Id = 3,
                UserName = "User3",
                Files = new List<FileUploadInfo>
                {
                    new FileUploadInfo { FileName = "Image", Extension = "png", Size = 512 },
                    new FileUploadInfo { FileName = "Spreadsheet", Extension = "xlsx", Size = 2048 },
                    new FileUploadInfo { FileName = "Manual", Extension = "docx", Size = 1024 }
                }
            }
        };
    }

    // Handle the row selection event of the user table
    private void OnUserSelected(User user)
    {
         SelectedUser = user;  // Set the selected user to show their files
    }

    // Handle the download button click event for the selected file
    private async Task DownloadFile(FileUploadInfo file)
    {
        if (file == null) return;

        // Create a sample file content (This should be replaced with the actual file content in a real application)
        var fileContent = $"Sample content of the file {file.FileName}.{file.Extension}";
        var fileBytes = System.Text.Encoding.UTF8.GetBytes(fileContent);
        var fileName = $"{file.FileName}.{file.Extension}";

        // Trigger the download using JSRuntime
        await JS.InvokeVoidAsync("downloadFile", fileName, Convert.ToBase64String(fileBytes));
    }

    public class User
    {
        public int Id { get; set; }
        public string UserName { get; set; }
        public List<FileUploadInfo> Files { get; set; } = new();
    }

    public class FileUploadInfo
    {
        public string FileName { get; set; }
        public string Extension { get; set; }
        public long Size { get; set; }  // In KB
    }
}

JavaScript:

function downloadFile(filename, content) {
    const link = document.createElement('a');
    link.rel='nofollow' href = `data:application/octet-stream;base64,${content}`;
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

Please review the attached sample and video reference for a visual guide on this implementation. Let us know if you have any further questions or need additional assistance.

Regards,

Buvana S

Attachment: BlazorServerProject_6_737caf02.zip

[YongQuan Rao]

Thanks for the sample.

[Priyanka Karthikeyan]

Hi junghwi,

You are welcome. Please feel free to contact us if you have any further questions.

 

Regards,

Priyanka K

[Ahmed Nasr Eldamity]

you provide this solution:  <UploaderUploadedFiles Name="@file.Name" Size="@file.Size" Type="@file.Type" /> I need to add another property (RelativePath) to be like this: <UploaderUploadedFiles Name="@file.Name" Size="@file.Size" Type="@file.Type" RelativePath="@file.RelativePath" />

for using this property here:

<UploaderTemplates>

<Template Context="FileContext">

<span class="d-flex justify-content-end align-items-center gap-2 file-uploader-buttons">

@{

var PdfURL = $"{FileContext.RelativePath}/{FileContext.Name}";

}

<a rel='nofollow' href="@PdfURL" target="_blank">Open</a>

</span>

</Template>

</UploaderTemplates>

how to make this?

[Priyanka Karthikeyan]

Hi Ahmed Nasr Eldamity,

Thank you for your update.

We understand that you'd like to include an additional property RelativePath in the <UploaderUploadedFiles> component and use it within the UploaderTemplates. However, please note that, due to browser security restrictions, it is not possible to retrieve the full or relative path of the selected file from the client side during file upload—this applies to both client-side and server-side environments.

This limitation is in place to protect user privacy and prevent malicious scripts from accessing sensitive information about a user's local file system. For more context, you may refer to the links below:

• StackOverflow - FileReader Path Restriction

Please let us know if you need any further assistance.

Regards,

Priyanka K

[Ahmed Nasr Eldamity]

I mean can I add any custom property to use for display, this relative path is from server not local. Another example: I have property that I get it from backend (IsServerSaved) that ensure is this file saved before or not, If not saved then I want to display the file name with yellow colour, So I mean any property I need to pass it from UploaderUploadedFiles to use it for display