Upload File and Data with Angularjs in MVC .net core

Question

<input type="file" ng-model="ch.FileName" id="file" name="myFile" nchange="angular.element(this).scope().saveChapter(this.files)"/>

Action Method,Js and other Code

Thanks for your first contribution. To improve this question, please read [How to Ask](https://stackoverflow.com/questions/how-to-ask) and [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) - then edit your question. Show what you got, what you aim for, and what you get and make clear what your problem is. — Todd, Jul 09 '21 at 16:22

score 1 · Accepted Answer · answered Jul 11 '21 at 03:58

Upload File and Data with Angularjs in MVC .net core

If you'd like to post binary data with other additional information/data from your angularjs frontend to WebAPI backend, you can try to pass the data through FormData object, like below.

var formdata = new FormData();
formdata.append('chapterID', $scope.ch.ChapterID);
formdata.append('bookID', $scope.ch.BookID);
formdata.append('chapterName', $scope.ch.FileName);
//...
formdata.append('cHFile', $scope.chfile);

$http({
    method: 'POST',
    url: 'your_request_url_here',
    headers: { 'Content-Type': undefined },
    data: formdata
}).then(function mySuccess(response) {
    //...

In browser developer tool Network tab, can find the data passed as expected

Test Result

Upload File and Data with Angularjs in MVC .net core

1 Answers1