I'm having some difficulties incorporating AngularJS into my web application and I need assistance with implementing the onClick event for my upload button.
Check out this snippet from my code:
<form action="" method="post" enctype="multipart/form-data>
<table style="margin-top:20px">
<tr>
<td><label for="file">Filename:</label></td>
<td><input type="file" name="file" id="file" accept=".csv" /></td>
<td><button type="submit" value="Upload" ng-click="uploadFile()" /></td>
</tr>
</table>
</form>
In the Controller (ASP.NET MVC):
[HttpPost]
public ActionResult Index(HttpPostedFileBase file)
{
//CSvReader reads in contents of the file and adds them to a list
//Stores the list in session
}
The challenge lies in writing the AngularJS script for the uploadFile() method.
I believe that, upon clicking, I need to utilize an $http service to post the data to my controller. However, I am unsure about how to accomplish this. How can I pass the necessary information from my view to my server-side controller? Are there additional steps I need to take in my AngularJS script apart from using that service?
Furthermore, I would like to know where should I place my onClick event within my module's code?
var myApp = angular
.module("myModule", [])
.controller("myController", function ($scope) {
$scope.uploadFile = function () {
// your upload logic here
var data = {
//file? What should be included in data?
};
$http
.post('Home/Index', data)
.success(function (data, status, headers, config) {
})
.errors(function (data, status, headers, config) {
});
};
});