c# - How to Call Controller Method in File Upload Using Angularjs Webapi -
i trying upload multiple file using angularjs , webapi.. html table:
<body ng-app="fupapp"> <div ng-controller="fupcontroller"> <input type="file" id="file" name="file" multiple onchange="angular.element(this).scope().getfiledetails(this)" /> <input type="button" ng-click="uploadfiles()" value="upload" /> <!--add progress bar element.--> <p><progress id="pro" value="0"></progress></p> </div> </body> here angularjs code multiple file upload(fileupload.js):
var myapp = angular.module('fupapp', []); myapp.controller('fupcontroller', function ($scope) { // file information. $scope.getfiledetails = function (e) { debugger; $scope.files = []; $scope.$apply(function () { debugger; // store file object in array. (var = 0; < e.files.length; i++) { $scope.files.push(e.files[i]) } }); }; // upload files. $scope.uploadfiles = function () { debugger; //fill formdata file details. var data = new formdata(); (var in $scope.files) { data.append("uploadedfile", $scope.files[i]); } // add listeners. var objxhr = new xmlhttprequest(); objxhr.addeventlistener("progress", updateprogress, false); objxhr.addeventlistener("load", transfercomplete, false); // send file details api. objxhr.open("post","mailroute/getdataforuploadfiles"); objxhr.send(data); } // update progress bar. function updateprogress(e) { debugger; if (e.lengthcomputable) { document.getelementbyid('pro').setattribute('value', e.loaded); document.getelementbyid('pro').setattribute('max', e.total); } } // confirmation. function transfercomplete(e) { debugger; alert("files uploaded successfully."); } }); here function in webapi:
public async task<httpresponsemessage> getdataforuploadfiles() { } but how read file deatils , access file details controller method(getdataforuploadfiles)
try this
<div ng-controller="ctrl"> <input type="file" file-upload multiple/> <ul> <li ng-repeat="file in files">{{file.name}}</li> </ul> </div> controller code
function ctrl($scope, $http) { //a simple model bind , send server $scope.model = { name: "", comments: "" }; //an array of files selected $scope.files = []; //listen file selected event $scope.$on("fileselected", function (event, args) { $scope.$apply(function () { //add file object scope's files collection $scope.files.push(args.file); }); }); //the save method $scope.save = function() { $http({ method: 'post', url: "/mailroute/getdataforuploadfiles", //important!!! might think should set 'multipart/form-data' headers: { 'content-type': false }, transformrequest: function (data) { var formdata = new formdata(); formdata.append("model", angular.tojson(data.model)); //now add of assigned files (var = 0; < data.files; i++) { //add each file form data , iteratively name them formdata.append("file" + i, data.files[i]); } return formdata; }, //create object contains model , files transformed // in above transformrequest method data: { model: $scope.model, files: $scope.files } }). success(function (data, status, headers, config) { alert("success!"); }). error(function (data, status, headers, config) { alert("failed!"); }); }; }; handling data server-side
public async task<httpresponsemessage> getdataforuploadfiles() { if (!request.content.ismimemultipartcontent()) { throw new httpresponseexception(httpstatuscode.unsupportedmediatype); } var root = httpcontext.current.server.mappath("~/app_data/temp/fileuploads"); directory.createdirectory(root); var provider = new multipartformdatastreamprovider(root); var result = await request.content.readasmultipartasync(provider); if (result.formdata["model"] == null) { throw new httpresponseexception(httpstatuscode.badrequest); } var model = result.formdata["model"]; //todo: json model string //get files foreach (var file in result.filedata) { //todo: each uploaded file } return request.createresponse(httpstatuscode.ok, "success!"); }
Comments
Post a Comment