Good People,
I am working on a web application where a user uploads an excel file, clicks the upload button and sends the file with its contents to the server for processing. I am am using angular.js and web API technologies. Can anyone advise on how do I "POST" the file from the client application and accept on the server side?
1. This is the html code for the front end:
<div class="modal fade" id="uploadUsersModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-removed" style="width: 510px">
<div class="modal-header">
<h4 class="modal-title">Bulk Upload - Users</h4>
</div>
<div class="modal-body">
<div class="form-group has-success has-feedback" style="width: 400px">
<label for="adminChecklist">File</label>
<input type="file" ng-model="model.file" class="form-control" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
</div>
</div>
<div class="modal-footer">
<div class="form-group has-success has-feedback" style="width: 440px">
<span class="pull-left">{{confirmation.confirmation}}</span><button type="button" class="btn btn-primary" ng-click="upload(model)">{{confirmation.buttonMessage}}Upload</button>
<button type="button" class="btn btn-danger" ng-click="closeUploadUsersModal()">Close</button>
</div>
</div>
</div>
</div>
</div>
2. This is javascript code in my controller that has to send the file to the server:
PenStatus is the controller on the viewerAPI.
var Files = $resource('viewerAPI/PenStatus/:id', { id: "@id" });
angular.extend($scope, {
model: { file: null },
upload: function (model) {
Files.prototype.$save.call(model.file, function (self, headers) {
});
}
});
3. This c# code on the server where I need to accept the excel file:
[HttpPost]
public IHttpActionResult Post()
{
return null;
}