Upload multiple files using angularjs in mvc
As we already learn that how to upload file using FormMethod in mvc. Now we learn how to upload multiple files using angularjs with progress bar in mvc. Let’s start, Here we use ngFileUpload AngularJS FileUploader.
View:-
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>upload multiple files using angularjs in mvc</title>
<style type="text/css">
.progressbar {
background-image: -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0,0, 0, .1) 66%, transparent 66%), -webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)), -webkit-linear-gradient(left, #09c, #f44);
border-radius: 2px;
background-size: 35px 20px, 100% 100%, 100% 100%;
}
</style>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/danialfarid-angular-file-upload/12.2.13/ng-file-upload.min.js"></script>
<script type="text/javascript">
var app = angular.module('codesolutionsfileupload', ['ngFileUpload'])
app.controller('fileController', function ($scope, Upload, $timeout) {
$scope.UploadFiles = function (files) {
$scope.SelectedFiles = files;
if ($scope.SelectedFiles && $scope.SelectedFiles.length) {
Upload.upload({
url: '/Home/Uploadfile/',
data: {
files: $scope.SelectedFiles
}
}).then(function (response) {
$timeout(function () {
$scope.Result = response.data;
});
}, function (response) {
if (response.status > 0) {
var errorMsg = response.status + ': ' + response.data;
alert(errorMsg);
}
}, function (evt) {
var element = angular.element(document.querySelector('#divprogressbar'));
$scope.Progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
element.html('<div style="width: ' + $scope.Progress + '%">' + $scope.Progress + '%</div>');
});
}
};
});
</script>
<div ng-app="codesolutionsfileupload" ng-controller="fileController">
<input type="file" multiple="multiple" ngf-select="UploadFiles($files)" />
<hr />
Files:
<ul><li ng-repeat="file in SelectedFiles">{{file.name}}</li></ul>
<div id="divprogressbar" class="progressbar" ng-show="Progress >= 0">
</div>
</div>
</body>
</html>
Controller:-
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text.RegularExpressions;
using System.Web;
using System.Web.Mvc;
namespace MVCCODESOLUTIONS.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpPost]
public ContentResult Uploadfile()
{
string path = Server.MapPath("~/files/");
if (!Directory.Exists(path))
{
Directory.CreateDirectory(path);
}
foreach (string key in Request.Files)
{
HttpPostedFileBase postedFile = Request.Files[key];
postedFile.SaveAs(path + postedFile.FileName);
}
return Content("Success");
}
}
}
Out-Put:
Solutions:-
The 4MB default is set in machine.config, but you can override on your web.config. For example ,we can expand the upload limit to 20MB, add below code to web.config:
<system.web>
<httpRuntime executionTimeout="240" maxRequestLength="20480" />
</system.web>
IIS7 (and later version) has a built-in request scanning which have upload file capacity which defaults to 30MB. To increase it, you also need to add the lines below:
<system.webServer>
<security>
<requestFiltering>
<requestLimits maxAllowedContentLength="3000000000" />
</requestFiltering>
</security>
</system.webServer>
Upload multiple files using angularjs in mvc
Reviewed by NEERAJ SRIVASTAVA
on
9:47:00 PM
Rating:
Reviewed by NEERAJ SRIVASTAVA
on
9:47:00 PM
Rating:
No comments: