File not being sent

[Thomas Hare]

I am using the file upload component and the server controller is being called but no file is being sent

                <SfUploader ID="UploadSignature" 

                            AutoUpload="false" 

                            AllowMultiple="false" 

                            AllowedExtensions=".gif, gif, .jpg, jpg, .jpeg, jpeg, .png, png">

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

                    <UploaderAsyncSettings SaveUrl="api/employee/UploadSignature" RemoveUrl="api/employee/RemoveSignature"></UploaderAsyncSettings>

                </SfUploader>

        [HttpPost("[action]")]

        [AllowAnonymous]

        //[Route("UploadSignature")]

        public async void UploadSignatureAsync(IList<IFormFile> file, [FromForm] int id)

        {

            try

            {

                if (file.Any() && id != 0)

                {

                    var employee = await _employeeRepository.GetByEmployeeNumberAsync(id);

                    using var ms = new MemoryStream();

                    file[0].CopyTo(ms);

                    var fileBytes = ms.ToArray();

                    //var s = Convert.ToBase64String(fileBytes);

                    employee.SignatureData = fileBytes;

                    var savedEmployee = await _employeeRepository.SaveEmployeeAsync(employee);

                }

            }

            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;

            }

        }

even removing the additional form parameter and make it non-async i get the same result. the controller is being called automatically by the component then the upload button is clicked, the browser dev tools shows there was binary data sent in the request, but there is no file received at the controller.

[Ponmani Murugaiyan]

Hi Thomas, 

Greetings from Syncfusion support. 

We would like to inform you that,  the name attribute must match the name of a parameter in the POST method. The name attribute is automatically generated from the control’s ID property. By using the name attribute in the Uploader component, we can get the file on the server side. We can give any name to the component Id but you can get the file on the server side by using the same Id name. Kindly refer the below code. 

[Index.razor] 

 

<SfUploader ID="UploadFiles" AutoUpload="false"  AllowedExtensions=".gif, gif, .jpg, jpg, .jpeg, jpeg, .png, png" Multiple="false"> 

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

</SfUploader> 

[SampleDataController.cs] 

 

  [HttpPost("[action]")] 

        public async void Save(IList<IFormFile> UploadFiles) 

        { 

            try 

            { 

                foreach (var file in UploadFiles) 

               ... 

            } 

         } 

Output: 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp_Uploader-1126425854 

Kindly apply the above suggestion in your application to get the files in the controller. Please get back us if you need further assistance. 

Regards, 

Ponmani M 

[David Margetson]

Please make this clear on documentation, I spent hours on same issue yesterday and nowhere in the documentation mention this, neither does the examples uses the ID attribute, somehow managed to find this after many frustrating hours

Regards,

DM

[Sureshkumar P]

Hi David, 

 

We have already noted this information in our below documentation section. We suggest you refer the notes section in the Asynchronous Upload in Blazor File Upload Component topic.  

 

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

 

Regards, 

Sureshkumar P