How to read response from minimal api when using a save endpoint in FileUpload component

[Rob Clayton]

Hi

I want to pass a response back to the Syncfusion after uploading file in order to know what the file was saved as I am saving it as a GUID + extension, e.g.  549FF5A4-BB54-4BC1-BBFD-DF87E1AA5AD3.csv

I put breakpoints on the OnActionCompleteHandler handler to see what is passed in the ActionCompleteEventArgs but don't see my API response object. How can I get at this object and indeed is it possible?

This is my code in UI:

                            <SfUploader AutoUpload="false" SequentialUpload="false" AllowMultiple="false" AllowedExtensions=".csv, .xlsx, .xls">

                                <UploaderAsyncSettings SaveUrl="https://localhost:7220/budget/save"

                                                       RemoveUrl="https://localhost:7220/budget/remove">@* TODO: we need to pass filename in this url *@

                                </UploaderAsyncSettings>

                                <UploaderEvents OnActionComplete="OnActionCompleteHandler" OnFailure="OnFailureHandler" ValueChange="OnChangeHandler" OnRemove="OnRemoveHandler"></UploaderEvents>

                            </SfUploader>

Minimal API:

app.MapPost("/budget/save", async (HttpRequest request) =>

{

    var form = await request.ReadFormAsync();

    var file = form.Files[0];

    if (file is not null)

    {

        const string StoragePath = "D:\\Temp\\";

        var filename = $@"\{Guid.NewGuid()}.{Path.GetExtension(file.FileName)}";

        var fullFilePath = StoragePath + filename;

        if (!File.Exists(fullFilePath))

        {

            using (FileStream fs = File.Create(fullFilePath))

            {

                file.CopyTo(fs);

                fs.Flush();

            }

            return Results.Ok(new BudgetSaveResponse

            {

                FileName = filename,

                Success = true,

                Message = "File uploaded successfully"

            });

        }

    }

    return Results.Problem();

});

DTO:

public class BudgetSaveResponse

{

    public string? FileName { get; set; }

    public bool Success { get; set; }

    public string? Message { get; set; }

}

Thanks in advance

Rob

[Yohapuja Selvakumaran]

Hi Rob Clayton,

Thank you for reaching out to us. We have thoroughly reviewed your requirement and are pleased to inform you that you can indeed pass a custom header from the server to the client using server headers, which can then be retrieved on the client side using the success event. We have provided a sample code snippet below for your reference:

Code Snippet:

[Controller.cs]

 

public void Save(IList<IFormFile> UploadFiles)

{

    try

    {

        foreach (var file in UploadFiles)

        {

            var filename = hostingEnv.ContentRootPath + $@"\{file.FileName}";

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

            {

                using (FileStream fs = System.IO.File.Create(filename))

                {

                    file.CopyTo(fs);

                    fs.Flush();

                }

            }

        }

    }

    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("GUID", "549FF5A4-BB54-4BC1-BBFD-DF87E1AA5AD3.csv");

}

 

 

[Index.razor]

 

<SfUploader ID="UploadFiles" AutoUpload="false">

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

    <UploaderEvents Success="OnSuccess"></UploaderEvents>

</SfUploader>

 

@code {

    public string customHeader { get; set; } = "";

 

    public string key { get; set; } = "";

 

    public string value { get; set; } = "";

 

    public void OnSuccess(Syncfusion.Blazor.Inputs.SuccessEventArgs args)

 

    {

 

        var customHeader = new string[] { };

 

        customHeader = args.Response.Headers.Split(new Char[] { '\n' });

        for (var i = 0; i < customHeader.Length; i++)

 

        {

 

            if (customHeader[i].Split(new Char[] { ':' })[0] == "guid")

 

            {

 

                key = customHeader[i].Split(new Char[] { ':' })[0];

                value = customHeader[i].Split(new Char[] { ':' })[1].Trim();

            }

        }

    }

}

This code demonstrates how to pass a custom header named "GUID" from the server to the client, and retrieve it on the client side using the success event. 

Regards,

Yohapuja S

Attachment: BlazFileUploader_servertoclient_df17f6f.zip

[Rob Clayton]

Hi  Yohapuja S

We’ve tried adding a custom header to our file upload api which lives outside of our blazor application, however it’s possible to see that the custom header is not present in the response via SfUploader, however is visible within a request sent with Postman:

We’ve added an “OnSuccess” handler to the Success UploaderEvent on the SfUploader component as below:

However, when inspecting the SuccessEventArgs property, you can see that the headers do not contain the custom header:

[Yohapuja Selvakumaran]

Hi Rob Clayton,

Thank you for reaching out to us. We have thoroughly validated your requirement and have provided a sample demonstrating the passing of a custom header from the server and retrieving it in the client-side Success event. In our sample, the custom header is successfully retrieved in the Success event.

However, based on the information you've shared, we suspect that you may not be utilizing the controller part for the uploader. To further investigate this issue and provide you with accurate assistance, could you please provide more details about how you are passing the custom header? Additionally, sharing the code snippet related to how you are passing the custom header would greatly aid us in validating and addressing this issue.

Your cooperation in providing these details is highly appreciated, and it will enable us to resolve this matter effectively. Thank you for your understanding.

Regards,

Yohapuja S

Attachment: BlazFileUploader_servertoclient_df17f6f_912f6078.zip

[Gary Varga]

Hi Yohapuja,

I am working with Rob and this works, as per your example, when the API is hosted in the same Blazor application. I have converted your sample from .NET 6 to .NET 8 and it remained working. However, all headers values except the content-length value appear to be lost when the API is hosted in a different project.

Regards,

Gary

[Priyanka Karthikeyan]

Hi Rob Clayton,

We've created a standalone Blazor project using .NET 8, and during our testing, we were able to successfully retrieve the added header on the client side within the success event. An attached sample provides reference material. Could you please share details about how you hosted your project?

To expedite the resolution process and offer accurate assistance, it would greatly help if you could modify the shared sample to align it more closely with your specific scenario. Additionally, providing detailed steps to replicate the issue on our end would be highly beneficial.

This information will enable us to replicate the issue effectively and provide a prompt response. Alternatively, feel free to share a sample that showcases the problem for better understanding.

 

 

Regards,

Priyanka K

Attachment: UploaderNET8_cc2c679f.zip