Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

AngularJS Upload MuItiple Files (Images) using Angular File Upload in Asp.net

Jun 20, 2016
Introduction

Here I will explain how to upload files / images using angularjs example in
asp.net or angularjs upload multiple files / images with progress example in asp.net using file upload module or File upload module in angularjs to upload multiple files / images in asp.net using c#, vb.net. In angularjs by using file upload module and html5 property “multiple” we can implement uploading multiple files / images in asp.net.


To upload multiples files using angularjs in asp.net we are going to use angularjs file upload module. First create new web application and open Default.aspx page and write the following code


<html xmlns="http://www.w3.org/1999/xhtml">
<head data-ng-app="UploadApp">
<title>AngularJS Upload Images using File Upload Plugin</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">
//inject angular file upload directives and services.
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 {
display: inline-block;
width: 100px;
border: 3px groove #CCC;
}
.progress div {
font-size: smaller;
background: orange;
width: 0;
}
</style>
</head>
<body ng-app="fileUpload" ng-controller="MyCtrl">
<form name="myForm">
<h3>AngularJS Upload Multiple Files</h3>
Upload:
<input type="file" ngf-select ng-model="picFile" name="file" multiple accept="image/*" ngf-max-size="2MB" required
ngf-model-invalid="errorFile">
<i ng-show="myForm.file.$error.required">*required</i><br>
<i ng-show="myForm.file.$error.maxSize">File too large
{{errorFile.size / 1000000|number:1}}MB: max 2M</i>
<br>
<button ng-disabled="!myForm.$valid" ng-click="uploadPic(picFile)">Submit</button><br />
<span class="progress" ng-show="picFile.progress >= 0">
<div style="width:{{picFile.progress}}%"
ng-bind="picFile.progress + '%'"></div>
</span>
<span ng-show="picFile.result">Upload Successful</span>
<span class="err" ng-show="errorMsg">{{errorMsg}}</span>
</form>
</body>
</html>
If you observe above code in header section we added “ng-file-upload-shim.min.js” and “ng-file-upload.min.js” file reference you can get those two files from this link angularjs file upload module or you can download from attached folder.

Here we added these references to upload files to folder and we can implement validation for file upload control and add restriction to allow only 2MB files to upload by using angularjs file upload module.

In angularjs uploadPic method we mentioned “UploadHandler.ashx” by using this we can upload files in server side. Now we will add handler file in our application by following below steps

Right click on your application à select Add New Item à select Generic Handler file à Give a name and click Add button like as shown below


Once you finished adding handler file now add new folder in your application “uploads” that would be like as shown below


Now open UploadHandler.ashx file and write the following code

C# Code


<%@ 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);
}
}
context.Response.ContentType = "text/plain";
context.Response.Write("File Uploaded Successfully!");
}
public bool IsReusable {
get {
return false;
}
}
}
VB.NET Code


<%@ 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
Now run your application that will allow you to upload files in upload folder using handler files.

Demo


Download Sample Code Attached


If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

3 comments :

Maitreya said...

I love you man! God bless you.

Unknown said...

good evening sir pls it isnt working for me..

Unknown said...

you are great

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.