Send a file from Angular to an ASP.NET controller

Question

Send a file from Angular to an ASP.NET controller

i am trying to upload a file using the following code in angular:

<input class="fromFileInput" id="VeryfyFromFileInput" type="file" fileread="fileContent" ng-click=uploadFile />

in my controller, I have the following code:

    $scope.fileInformation = [];

    $scope.uploadFile = function () {
        $scope.fileModel = $('#VeryfyFromFileInput');
        recordsService.passFile($scope.fileModel.context);
    };

and in my service, I have the following code:

        this.passFile = function (data) {
        return $http({
            method: 'POST',
            url: url + "/GetFile",
            data: data,
            headers: { 'Content-Type': 'application/json' }
        });
    };

I am trying to pass the file to an ASP.NET MVC controller using the following code:

    [HttpPost]
    public void GetFile([FromBody] HttpRequestMessage file)
    {

    }

However, I always end up with a null value. Can anyone advise me on what type of parameter I should use instead of 'HttpRequestMessage '? Or could the issue be on the javascript side?

javascript c#asp.net angularjs asp.net-mvc

Answer 1

Answer №1

Transmitting bytedata as application/json over the wire is not possible. One workaround is to utilize a Form Data object and execute the ajax call as multipart/formdata. Follow this Ajax call template:

         $.ajax({
                url: 'api/controller/action',
                processData: false,
                contentType: false,
                type: 'POST',
                data: formDataObject,
                success: function () {
                    alert('Success!');
                },
                error: function () {
                    alert('Error :c');
                }
            });

I made use of an angular-ui file upload directive. If your method of accessing it is effective, you can directly apply this syntax to include your file in FormData:

var formDataObject = new FormData();
formDataObject.append('file', $scope.fileModel;

Retrieve your data on the server using this code snippet:

 var filesReadToProvider = await Request.Content.ReadAsMultipartAsync();
 foreach (var stream in filesReadToProvider.Contents)
 switch (stream.Headers.ContentDisposition.Name)
                {
                    case "\"file\"":
                        byte[] fileData = await stream.ReadAsByteArrayAsync();
                        break;
                    default:
                        break;

                }

            }

To learn how to save a byte array as a file on the server, refer to: Write File to server

Best of luck!

Answer 2

Transmitting bytedata as application/json over the wire is not possible. One workaround is to utilize a Form Data object and execute the ajax call as multipart/formdata. Follow this Ajax call template:

         $.ajax({
                url: 'api/controller/action',
                processData: false,
                contentType: false,
                type: 'POST',
                data: formDataObject,
                success: function () {
                    alert('Success!');
                },
                error: function () {
                    alert('Error :c');
                }
            });

I made use of an angular-ui file upload directive. If your method of accessing it is effective, you can directly apply this syntax to include your file in FormData:

var formDataObject = new FormData();
formDataObject.append('file', $scope.fileModel;

Retrieve your data on the server using this code snippet:

 var filesReadToProvider = await Request.Content.ReadAsMultipartAsync();
 foreach (var stream in filesReadToProvider.Contents)
 switch (stream.Headers.ContentDisposition.Name)
                {
                    case "\"file\"":
                        byte[] fileData = await stream.ReadAsByteArrayAsync();
                        break;
                    default:
                        break;

                }

            }

To learn how to save a byte array as a file on the server, refer to: Write File to server

Best of luck!

Send a file from Angular to an ASP.NET controller

Answer №1

Similar questions

Incorporating Javascript jQuery functionalities from an external file

What steps should I take to resolve the issue with running npm start?

The event handler for clicking on the inner <li> element is not being triggered

Is it feasible to update the value of a FormArray within a FormGroup?

Understanding how to accurately pair specific data points with their corresponding time intervals on a chart

Delete the radio button list within the content placeholder

How to cover the entire screen with a modal window?

What benefits does NewRelic offer?

What could be causing the discrepancy in the model value when using checkboxes in AngularJS?

What is the process of installing an npm module from a local directory?

Working with checkboxes generated through v-for loop manipulation

What steps should I follow to change the appearance of this object to match this?

Discovering the art of importing JavaScript files dynamically within controllers

Changing dates in controller using AngularJS

Exploring jQuery's Ability to Manipulate Data

Why is the renderer using viewport and scissor in Three.js resulting in a fully black canvas?

Switch to a different element by rolling over one

Using the PATCH method in Rails instead of POST

Struggling with parsing a JSON file in C# and looking for some guidance

Should websites developed in PHP, Rails, Django, or ASP have been coded in C++ instead?