Introduction
In this article, I am going to explain how to upload multiple images and files with jquery uploading progress bar using AngularJs in asp.net c# and vb.net. In my previous articles, I explained MVC Angular CRUD Operation Using WEB API 2 With Stored Procedure, and today with this article I will show how you can upload multiple files and images using angular in Asp.net.
Requirement
While we working with any web application sometimes we have some requirements like to upload files, folders,s or images into a database, and for a better user experience obviously, we try to implement such kinds of requirements with a faster way and good user interface. In my case, I got the following requirements from the client-side.
1) Design a Web Page where users can upload files, folders, images.
2) User can select multiple files, folders, images.
3) display a progress bar that indicates the time required to upload selected files in form of a percentage.
5) Add validation for file upload.
6) File/Image size should be 1 MB only, and allow only 1 MB files
4) Show message when all the selected files, folder,s or images from file upload control is successfully Complete.
Implementation
To achieve this requirement we will use angular and I will explain to you how we can create multiple file upload control and for that here, I am going to create an example for demonstration.
Here I will write a script that will validate the size of the file and also inject angular file upload directives and services.
<script type="text/javascript"> var app = angular.module('fileUpload', ['ngFileUpload']); app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) { $scope.uploadPic = function (file) { file.upload = Upload.upload({ url: 'UploadHandler.ashx', data: { file: file } }); file.upload.then(function (response) { $timeout(function () { file.result = response.data; }); }, function (response) { if (response.status > 0) $scope.errorMsg = response.status + ': ' + response.data; }, function (evt) { file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total)); }); } }]); </script>
If you analyzed the above code then you can see here I implement validation for file upload and not allows files which is more than 1 MB.
Now, after creating this script you also need to link your script file of angular.min.js, ng-file-upload-shim.min.js, and ng-file-upload.min.js just after <head> tag of your page something like:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script> <script src="scripts/ng-file-upload-shim.min.js" type="text/javascript"></script> <script src="scripts/ng-file-upload.min.js" type="text/javascript"></script>
Now You can see the full HTML markup of our web page.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head data-ng-app="UploadApp"> <title>AngularJS File Upload Example in Asp.Net</title> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script> <script src="scripts/ng-file-upload-shim.min.js" type="text/javascript"></script> <script src="scripts/ng-file-upload.min.js" type="text/javascript"></script> <script type="text/javascript"> var app = angular.module('fileUpload', ['ngFileUpload']); app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) { $scope.uploadPic = function (file) { file.upload = Upload.upload({ url: 'UploadHandler.ashx', data: { file: file } }); file.upload.then(function (response) { $timeout(function () { file.result = response.data; }); }, function (response) { if (response.status > 0) $scope.errorMsg = response.status + ': ' + response.data; }, function (evt) { // Math.min is to fix IE which reports 200% sometimes file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total)); }); } }]); </script> <style type="text/css"> form .progress { line-height: 15px; } .progress { width: 100%; background-color: #ddd; } .progress div { width: 1%; height: 30px; background-color: #223c88; } .upload-btn-wrapper { position: relative; overflow: hidden; display: inline-block; } .btn { border: 2px solid gray; color: #fff; background-color: #223c88;; padding: 8px 20px; border-radius: 8px; font-size: 20px; font-weight: bold; } .upload-btn-wrapper input[type=file] { font-size: 100px; position: absolute; left: 0; top: 0; opacity: 0; } button { background-color: #4CAF50; /* Green */ border-radius: 8px; border: none; color: white; padding: 8px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; } </style> </head> <body ng-app="fileUpload" ng-controller="MyCtrl"> <form name="myForm"> <h3>AngularJS File Upload Example in Asp.Net</h3> <div class="upload-btn-wrapper"> <button class="btn">Upload a file</button> <input type="file" ngf-select ng-model="picFile" name="file" multiple accept="image/*" ngf-max-size="2MB" required ngf-model-invalid="errorFile" /> </div> <div> <i ng-show="myForm.file.$error.required">Please select any files/images.</i><br> <i style="color: red" ng-show="myForm.file.$error.maxSize">File too large {{errorFile.size / 1000000|number:1}}MB: Max 1MB</i> </div> <br> <div> <button ng-disabled="!myForm.$valid" ng-click="uploadPic(picFile)">Submit</button> </div> <br> <div style="background-color: #f1f1f1!important"> <span style="color: #fff!important" class="progress" ng-show="picFile.progress >= 0"> <div style="width:{{picFile.progress}}%" ng-bind="picFile.progress + '%'"></div> </span> </div > <span style="color:#4CAF50!important" ng-show="picFile.result">Your Upload Successful</span> <span style="color:Red" class="err" ng-show="errorMsg">{{errorMsg}}</span> </form> </body> </html>
If you analyzed above code then we also used AngulerJs progress bar, when the user selects any files/image and submit at that progress bar appear on the screen and shows how much files/images are saved in form of percentage where 100% indicate all the selected files/images saved successfully.
Now, this is the time to add Generic Handler in our project, and we will give the name as UploadHandler. To Add a Generic Handler you can follow these steps.
Step1: Press Mouse Right Click on Name of Your Project.
Step2: Select Add.
Step3: Select Add New Item.
Step4: Select Generic Handler.
Step5: Give the name of your handler.
Step6: Done.
 |
| Generic Handler |
 |
| Add-Generic-Handler |
Now, we will write the following code in created Generic Handler UploadHandler.ashx
If You working with C# Then please follow the code described below.
C#
<%@ WebHandler Language="C#" Class="UploadHandler" %> using System; using System.Web; using System.IO; public class UploadHandler : IHttpHandler { public void ProcessRequest (HttpContext context) { if (context.Request.Files.Count > 0) { HttpFileCollection files = context.Request.Files; for (int i = 0; i < files.Count; i++) { HttpPostedFile file = files[i]; string fname; if (HttpContext.Current.Request.Browser.Browser.ToUpper() == "IE" || HttpContext.Current.Request.Browser.Browser.ToUpper() == "INTERNETEXPLORER") { string[] testfiles = file.FileName.Split(new char[] { '\\' }); fname = testfiles[testfiles.Length - 1]; } else { fname = file.FileName; } fname = Path.Combine(context.Server.MapPath("~/uploads/"), fname); file.SaveAs(fname); } } } public bool IsReusable { get { return false;} } }
If You working with VB.Net Then please follow the code described below.
Vb.Net
<%@ WebHandler Language="VB" Class="Handler" %> Imports System.Web Imports System.IO Public Class Handler : Implements IHttpHandler Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest If context.Request.Files.Count > 0 Then Dim files As HttpFileCollection = context.Request.Files For i As Integer = 0 To files.Count - 1 Dim file As HttpPostedFile = files(i) Dim fname As String If HttpContext.Current.Request.Browser.Browser.ToUpper() = "IE" OrElse HttpContext.Current.Request.Browser.Browser.ToUpper() = "INTERNETEXPLORER" Then Dim testfiles As String() = file.FileName.Split(New Char() {"\"c}) fname = testfiles(testfiles.Length - 1) Else fname = file.FileName End If fname = Path.Combine(context.Server.MapPath("~/uploads/"), fname) file.SaveAs(fname) Next End If context.Response.ContentType = "text/plain" context.Response.Write("File Uploaded Successfully!") End Sub Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable Get Return False End Get End Property End Class
Output
 |
| AngularJS Select File |
 |
| AngularJS File Upload Validation |
 |
| AngularJS File Upload Successful |
Summary
This article explains how you can upload multiple images and files with jquery uploading progress bar using AngularJs in asp.net c# and vb.net, and also explains how you can validate the size of the file. I hope this article helps you, if you have any query then please you can leave your comments in the comment box thank you.
