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.


Upload multiple files using angularjs in mvc



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:



Note if you are getting an error “Maximum request length exceeded”
like below images




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 Upload multiple files using angularjs in mvc Reviewed by NEERAJ SRIVASTAVA on 9:47:00 PM Rating: 5

No comments:

Powered by Blogger.