SfUploader & dto file

[Sarah]

Hi,

I use the service layer to connect the Blazor Wasm layer with the web api.

wasm razor component:

service.Insert(Personneldto)

service.Update(Personneldto)

I have seen the samples on your site. My scenario has two differences from your sample code:

1- When the user uploads a file or deletes a file, I apply these changes only to the user's dto. When the user clicks the save button, I send the changes to the service layer to record them in the database.

2- In dto I have byte[] for file.

How do I use SfUploader?

public class Personnel

{

  public int Id { get; set; }

  public string NameFamily { get; set; }

  public List<Filedto> lstFile { get; set; }

}

public class Filedto

{

    public int Id { get; set; }

    public string Name { get; set; }

    public string Type { get; set; }

    public byte[] ContentByte { get; set; }

    public double Size { get; set; }

}

[Priyanka Karthikeyan]

Hi Sarah,

We are pleased to inform you that we have crafted a sample featuring asyncsettings to address your needs. With this setup, when a file is uploaded, it will activate a save action on the controller's side. This feature enables you to seamlessly store essential file information to meet your specific requirements. For your convenience, we have enclosed the relevant code snippet and a sample for your reference.

FileUploadFeatures.razor

<SfUploader ID="UploadFiles" >

           <UploaderEvents OnRemove="OnFileRemove"></UploaderEvents>

            <UploaderAsyncSettings SaveUrl="https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save" RemoveUrl="https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove"></UploaderAsyncSettings>

</SfUploader>

SampleDataController.CS

       [DisableRequestSizeLimit]

        [HttpPost("[action]")]

        public void Save(IList<IFormFile> UploadFiles)

        {

            var saveLocation = @"E:\"; // replace with the path where you want to save the files

            try

            {

                foreach (var file in UploadFiles)

                {

                    var filename = Path.Combine(saveLocation, file.FileName);

                    if (file.Length > 0 && !System.IO.File.Exists(filename))

                    {

                        using (var stream = new FileStream(filename, FileMode.Create))

                        {

                            file.CopyTo(stream);

                        }

                    }

                }

            }

            catch (Exception e)

            {

                Response.Clear();

                Response.StatusCode = 204;

                Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "File failed to upload";

                Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = e.Message;

            }

            Response.Headers.Add("FileLocation", saveLocation);

        }

        [HttpPost("[action]")]

        public void Remove(string UploadFiles)

        {

            try

            {

                var saveLocation = @"E:\"; // replace with the path where you want to save the files

                var filename = Path.Combine(saveLocation, UploadFiles);

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

                {

                    System.IO.File.Delete(filename);

                }

            }

            catch (Exception e)

            {

                Response.Clear();

                Response.StatusCode = 200;

                Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "File removed successfully";

                Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = e.Message;

            }

        }

Please find the documentation below for more information

https://blazor.syncfusion.com/documentation/file-upload/async

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html

However, if this solution does not precisely match your requirements. We kindly encourage you to share any concerns you may have, as we are fully dedicated to providing additional assistance and ensuring that your needs are thoroughly addressed.

Regards,

Priyanka K

Attachment: SyncfusionBlazorWASMApp466098816_(1)_(2)_82beb8f4.zip

[Sarah]

Hi Priyanka Karthikeyan,

Thank you for your reply

I edited your source.

Attachment: SyncfusionBlazorWASMApp_up_(2)_c4caac60.zip

[Shereen Shajahan]

Hi Sarah,

Thanks for the update. Please get back to us for assistance in the future.

Regards,

Shereen

[Sarah]

Hi Priyanka Karthikeyan,

I did not understand what you meant. I have modified your source code and thank you for checking my code and completing the SfUploader component part.

[Priyanka Karthikeyan]

Hi Sarah,

If you want to send file information to the server, you can call the UploadAsync method within the OnClick_Save method. This will trigger the save action in the controller. In the save action's parameter, you can access the file information to save it in the database.Additionally, if you specifically want to upload a particular file, you can pass the file info as a parameter to the UploadAsync method and retrieve this information in the save action in controller side.

@page "/fileupload-features"

@using Syncfusion.Blazor

@using Syncfusion.Blazor.Inputs

@using SyncfusionBlazorWASMApp.Shared;

@inject IPersonnelService personnelService

                    <SfUploader ID="UploadFiles" @ref="objSyncUploader" AllowMultiple=”false” MaxFileSize="1000000" AutoUpload="false">

                        <UploaderEvents ValueChange="OnFileUploader_Change_Syncfusion"

                                        OnRemove="OnFileUploader_Remove_ChangeSyncfusion"

                                        FileSelected="OnSelectFile_Syncfusion">

                        </UploaderEvents>

                        <UploaderAsyncSettings SaveUrl="api/SampleData/Save" RemoveUrl="api/SampleData/Remove"></UploaderAsyncSettings>

</SfUploader>

<button @onclick="OnClick_Save">Save</button>

<style>

    .e-btn.e-flat.e-primary, .e-css.e-btn.e-flat.e-primary {

        display: none;

    }

</style>

@code {

    public SfUploader objSyncUploader { get; set; } = new();

    public async Task OnClick_Save()

    {

        await personnelService.Save(pdto);

        await objSyncUploader.UploadAsync();

    }

If the provided solution does not fully meet your requirements or if you have specific use-case scenarios that require further customization, please provide additional details about your use case so that we can offer more tailored assistance and guidance.

Documentation: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_UploadAsync_Syncfusion_Blazor_Inputs_FileInfo___System_Nullable_System_Boolean__

Regards,

Priyanka K

Attachment: SyncfusionBlazorWASMApp_up_(3)_c4caac60_a57136ac.zip