1. Home
  2. Forum
  3. Blazor
  4. File Upload Style

File Upload Style

Hi,

Is it possible to change the display style in FileUpload component? One drawback is the height.





24 Replies
PM Ponmani Murugaiyan Syncfusion Team January 21, 2022 03:14 AM UTC

Hi Sarah, 

Yes, you can customize the Uploader UI by overriding the styles. We have prepared sample and attached below for reference. 

 
 


Please get back us if you need further assistance. 

Regards, 
Ponmani M 


SA Sarah January 26, 2022 06:02 AM UTC

Hi 

Thank you so much for the guidance which was exactly what I needed. There is another case. I have the following model classes.


public Class clsFile{  public string FileName { get; set; }   public byte[] Content { get; set; }}

public class clsUser{ name , family ,   public List<clsFile>  UserFiles {get;set;}}



I read the site guide. In the following event

 private void OnFileUploader (UploadChangeEventArgs args){......}

How can I fill clsFile? Given that its type is byte [].


Thank you


PM Ponmani Murugaiyan Syncfusion Team January 27, 2022 03:23 PM UTC

Hi Sarah, 

We have processed using onUploadStart event. In this event, the file return as raw file from file data and converted to byte[] from base64 and returned as memory stream.  

 


Regards, 
Ponmani M 


SA Sarah replied to Ponmani Murugaiyan January 30, 2022 07:31 AM UTC

Hi  Ponmani Murugaiyan,


Thank you for your answer. Unfortunately, this method did not work either. If we define dto as follows. Is it possible in the ValueChange event to put the contents of the files selected by the user as IFromFile in dto?

I want to send dto to WebApi at HttpClient.Post()


public Class clsFile{  public string FileName { get; set; }   public IFromFile Content { get; set; }}

public class clsUser{ name , family ,   public List<clsFile>  UserFiles {get;set;}}


Thank you


PM Ponmani Murugaiyan Syncfusion Team January 31, 2022 03:47 PM UTC

Hi Sarah, 

You can get the file type in byte[] using change event argument files as like below code snippet. 

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(); 
            byte[] bytes = file.Stream.ToArray(); 
            string base64 = Convert.ToBase64String(bytes); 
        } 
    } 

 


Regards, 
Ponmani M 


SA Sarah February 5, 2022 09:57 AM UTC

Hi Ponmani Murugaiyan,


Thank you very much for your help. The bug has been fixed. I have a service layer whose output is List<dto>. I receive  List<dto> files that the user has uploaded in the past from the service layer as dto‌. But unfortunately it is not displayed in the uploader component.


 <SfUploader @ref="objUploader" AllowMultiple=true Files="@lstFiles" >

                     <UploaderEvents ValueChange="..."  OnRemove="....."  FileSelected="...."> </UploaderEvents>

</SfUploader>



 protected async override Task OnInitializedAsync()

{

 //Fill  lstFiles

{



PM Ponmani Murugaiyan Syncfusion Team February 7, 2022 03:32 PM UTC

Hi Sarah, 

We couldn’t reproduce your reported issue in our end, we request you to share the issue reproducing sample to investigate further. 

Regards, 
Ponmani M 


SA Sarah February 7, 2022 06:09 PM UTC

Hi  Ponmani Murugaiyan,

Actually, I do not have a code for these problems yet. But the scenario is as follows:

In the insert.razor page, several photos can be uploaded for the employee. As follows:


In the edit.razor page, I want to show the files that have been uploaded in the past to the user. The user can delete old files or add new ones. In other words, when loading the edit.razor page, I want to display the above image to the user.


Thank you



PM Ponmani Murugaiyan Syncfusion Team February 8, 2022 08:32 AM UTC

Hi Sarah, 

You can add the preloaded files to the component while page loads using the UploaderFiles tag. For more information, please find the demo and sample below for reference. 

<SfUploader @ref="UploaderObj"> 
                <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> 
                ... 
            </SfUploader> 



Also, if you would like to persists the user selected files on page reload, you can enable the EnablePersistence property. 

Regards, 
Ponmani M 


SA Sarah February 12, 2022 09:39 AM UTC

Hi Ponmani Murugaiyan,


Excellent was exactly what I wanted. I have the SfUploader component on the edit page and it displays a list of files I have uploaded in the past. Is the user able to download the file from this list(Download files uploaded in the past) In  SfUploader  Component?


Thank you


PM Ponmani Murugaiyan Syncfusion Team February 14, 2022 06:52 AM UTC

Hi Sarah,


You can download the uploaded file by inserting the download icon in each list with template support and using click event perform the action for downloading the file as like below code snippet.


[Index.razor]


<SfUploader ID="UploadFiles">
<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>
<UploaderTemplates>
<Template>
<span class='name file-name'>@(context.Name)span>
<span class='file-size'>@(context.Size) bytesspan>
<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>


[wwwroot/upload.js]


window.onUpload = (id, filename) => {
window.location.rel='nofollow' href = url;
};


[Data/SampleData/Download]
public FileResult Download(string filename)
{
var filePath = Path.Combine(Directory.GetCurrentDirectory());
IFileProvider provider = new PhysicalFileProvider(filePath);
IFileInfo fileInfo = provider.GetFileInfo("path"+filename);
var readStream = fileInfo.CreateReadStream();
var mimeType = "application/pdf";
return File(readStream, mimeType, filename);
}
Output:
By clicking on the download icon, the uploaded file will be downloaded as per your requirement.




Regards,
Ponmani M



SA Sarah February 16, 2022 12:56 PM UTC

Hi Ponmani Murugaiyan,


Thank you, the problems have been resolved. Does the default style disappear when using UploaderTemplates?

The colors changed and the row height increased.

I set the styles manually for the items. In upload-status, different styles must be set for success or failure.


Thank you.



PM Ponmani Murugaiyan Syncfusion Team February 17, 2022 12:27 PM UTC

Hi Sarah, 

Query: Does the default style disappear when using UploaderTemplates? 

Yes, in uploader template we have customized the file list, so we need to override the styles manually in our end. You can change the success and error message color as like below code snippet.  
 

<SfUploader ID="UploadFiles"> 
    <UploaderTemplates> 
        <Template> 
            <span class='name file-name'>@(context.Name)</span> 
            <span class='file-size'>@(context.Size) bytes</span> 
            @if (context.Status == "File uploaded successfully") 
            { 
                <span class="upload-status-success">@(context.Status)</span> 
            } 
            else 
            { 
                <span class="upload-status-error">@(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> 
 
<style> 
    .upload-status-success { 
        color: green; 
    } 
    .upload-status-error { 
        color: red; 
    } 
</style> 

Regards, 
Ponmani M 


SA Sarah February 19, 2022 06:05 PM UTC

Hi  Ponmani Murugaiyan,

I checked and the problem was fixed. I do not have the option to delete the uploaded file. It is possible to tell me how to do it.


 <span class="fa fa-trash " title="remove" @onclick="@(e => OnFileUploaderRemoveClick(e, e.Context.Name,Context.Size))"></span>




Thank you


PM Ponmani Murugaiyan Syncfusion Team February 21, 2022 06:15 AM UTC

Hi Sarah, 

You can remove the uploaded files in template sample using the separate delete button as like below code snippet and perform action for deleting the file in the onclick method. 

<SfUploader  @ref="FileUploader" ID="UploadFiles"> 
    <UploaderTemplates> 
        <Template> 
            <span class='name file-name'>@(context.Name)</span> 
            <span class='file-size'>@(context.Size) bytes</span> 
            @if (context.Status == "File uploaded successfully") 
            { 
                <span class="upload-status-success">@(context.Status)</span> 
            } 
            else 
            { 
                <span class="upload-status-error">@(context.Status)</span> 
            } 
 
            <span class="fa fa-download" title="Download" @onclick="@(e => OnClick(e, context.Name))"></span> 
            <span class="e-icons e-file-delete-btn m-2 position-relative" 
                  tabindex="0" 
                  title="Delete @(context.Name)" @onclick="@(() => DeleteFile(context))" /> 
        </Template> 
    </UploaderTemplates> 
    <UploaderEvents ValueChange="OnChange"></UploaderEvents> 
</SfUploader> 
 
@code { 
 
    public SfUploader FileUploader; 
    [Inject] 
    protected IJSRuntime JsRuntime { get; set; } 
    public List<Syncfusion.Blazor.Inputs.FileInfo> files = new List<Syncfusion.Blazor.Inputs.FileInfo>(); 
    private async void DeleteFile(Syncfusion.Blazor.Inputs.FileInfo file) 
    { 
        // Delete file from File Upload component  
        var filename = file.Name; 
        int idx = files.FindIndex(c => c.Name == filename); 
        FileInfo[] text = new FileInfo[] { files[idx] }; 
        await FileUploader.Remove(text); 
    } 
 
    private void OnChange(UploadChangeEventArgs args) 
    { 
        files = new List<Syncfusion.Blazor.Inputs.FileInfo>(); 
        foreach (var file in args.Files) 
        { 
            files.Add(new Syncfusion.Blazor.Inputs.FileInfo() 
            { 
                Name = file.FileInfo.Name, 
                Id = file.FileInfo.Id, 
                RawFile = file.FileInfo.RawFile, 
                Size = file.FileInfo.Size, 
                Status = file.FileInfo.Status, 
                StatusCode = file.FileInfo.StatusCode, 
                FileSource = file.FileInfo.FileSource, 
                Input = file.FileInfo.Input, 
                List = file.FileInfo.List, 
                Type = file.FileInfo.Type, 
                ValidationMessages = file.FileInfo.ValidationMessages 
            }); 
        } 
    } 

Regards, 
Ponmani M 


SA Sarah February 21, 2022 05:31 PM UTC

Hi Ponmani Murugaiyan ,


Thank you so much


PM Ponmani Murugaiyan Syncfusion Team February 22, 2022 03:36 AM UTC

Hi Sarah, 

Most welcome, please get back us if you need further assistance. 

Regards, 
Ponmani M 


SA Sarah replied to Ponmani Murugaiyan June 22, 2022 04:09 AM UTC

Hi Ponmani Murugaiyan ,


I encountered a problem. On the edit page, we show the user a list of files they have uploaded in the past. Suppose a user deletes a number of old files and adds and saves new files. In the web api I get a list of files that I do not know which of these files have been uploaded in the past (for this file I do not need to make changes to the database) and which one the user has deleted (I have to delete from the database) and which one the user Newly uploaded (save as a new file in the database). It should be noted that the user can upload different files with the same name or the same size.


Thank you


UD UdhayaKumar Duraisamy Syncfusion Team June 22, 2022 01:08 PM UTC

Hi Sarah,


We are validating the requirement. We will update the further details in two business days(24rd June 2022).


Regards,

Udhaya Kumar D



UD UdhayaKumar Duraisamy Syncfusion Team June 26, 2022 04:11 PM UTC

Hi Sarah,


We can upload the same file in the uploader with the same name and size as mentioned in the below screenshot (By using the sample provided in the previous update). We request you to provide the exact requirement details that you want to achieve. This will help us validate the requirement further and provide you with a better solution.

Screenshot:



Regards,
Udhaya Kumar D.



SA Sarah June 28, 2022 06:42 AM UTC

Hi UdhayaKumar Duraisamy,


Suppose we have three files with the same name and size (file A, File B, file C.) On the create page, the user uploads file A, B. In the edit page, we display file A, B in the SfUploadercomponent to the user. Suppose the user deletes file B and adds file C and click the save button. In this case, there are two files in the list of files sent to the web api that I can not find out whether these two files are the same A, B or delete file B from the bank and insert the C file in the bank.


thank you




MM Mohanraj Mathaiyan Syncfusion Team June 29, 2022 04:37 PM UTC

Hi Sarah,


We have validated your requirement in our end. i.e., After uploading the file with same name and size in uploader component, the file information gets stored in list. so if you delete the specific file from the uploaded list, the file(s) with exact primary/unique data(name,id,etc) will get removed from it. It’s indented behavior of the file upload component.


Regards,

Mohanraj M


SA Sarah July 30, 2022 06:01 AM UTC

Hello,


Thank you for your reply. 

I did not understand. If possible, introduce a source code so that I can check.


thank you


UD UdhayaKumar Duraisamy Syncfusion Team August 1, 2022 02:40 PM UTC

Hi Sarah,


While we update the multiple duplicate files, the uploader will send only one file to the server. We have shared the Syncfusion File Upload sample below for your reference. Also, we request you to provide additional details about the query as mentioned below, This will help us validate the query further and provide you with a better solution.


1. Exact Requirement details with Video illustration.

2. Issue reproducing sample (or modify the attached sample).

3. Issue replication steps.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/FileUploadSample1880542140


Regards,

Udhaya Kumar D


Loader.
Up arrow icon