Files Upload Using AngularJS In ASP.NET MVC And Bootstrap

Satyaprakash Samantaray
May 26, 2017
26.6k
0
9
Article

Introduction

Multiple files uploaded with AngularJS and ASP.NET MVC scan an individual file's upload progress. Files upload faster compared to the traditional way, which we followed earlier in ASP.NET.

Description

Here, I have an upload button. This one supports and lets the user select multiple files to upload and each file will be tracked, which is based on its upload progress. Here, you can check your file name, path, Extension, Size and status. Status message is based on the file upload to the destination or not.

This part is configured in AngularJS.

References for better understanding are given below.

http://www.c-sharpcorner.com/article/introduction-to-angularjs-in-asp-net-mvc/
http://www.c-sharpcorner.com/members/satyaprakash-samantaray

Steps to be followed are given below.

Step1

First, create a MVC Application named SatyaFileUploadAngularJS.

MVC

Step2

Create a folder named App_Content.

Inside it, add Bootstrap related files, as shown below.

Inside JS folder, create a sub folder named Practical.

Inside it, add two JavaScript files named ImageUploadMultipleController.js and Module.js.

Step 3

Code ref of ImageUploadMultipleController.js is given below.

app.controller('ImageUploadMultipleCtrl', function ($scope) {
$scope.fileList = [];
$scope.curFile;
$scope.ImageProperty = {
file: ''
}
$scope.setFile = function (element) {
$scope.fileList = [];
var files = element.files;
for (var i = 0; i < files.length; i++) {
$scope.ImageProperty.file = files[i];
$scope.fileList.push($scope.ImageProperty);
$scope.ImageProperty = {};
$scope.$apply();
}
}
$scope.UploadFile = function () {
for (var i = 0; i < $scope.fileList.length; i++) {
$scope.UploadFileIndividual($scope.fileList[i].file,
$scope.fileList[i].file.name,
$scope.fileList[i].file.type,
$scope.fileList[i].file.size,
i);
}
}
$scope.UploadFileIndividual = function (fileToUpload, name, type, size, index) {
var reqObj = new XMLHttpRequest();
reqObj.upload.addEventListener("progress", uploadProgress, false)
reqObj.addEventListener("load", uploadComplete, false)
reqObj.addEventListener("error", uploadFailed, false)
reqObj.addEventListener("abort", uploadCanceled, false)
reqObj.open("POST", "/FileUpload/UploadFiles", true);
reqObj.setRequestHeader("Content-Type", "multipart/form-data");
reqObj.setRequestHeader('X-File-Name', name);
reqObj.setRequestHeader('X-File-Type', type);
reqObj.setRequestHeader('X-File-Size', size);
reqObj.send(fileToUpload);
function uploadProgress(evt) {
if (evt.lengthComputable) {
var uploadProgressCount = Math.round(evt.loaded * 100 / evt.total);
document.getElementById('P' + index).innerHTML = uploadProgressCount;
if (uploadProgressCount == 100) {
document.getElementById('P' + index).innerHTML =
'<i class="fa fa-refresh fa-spin" style="color:green;"></i>';
}
}
}
function uploadComplete(evt) {
document.getElementById('P' + index).innerHTML = '<span style="color:Green;font-weight:bold;font-style: oblique">Saved..</span>';
$scope.NoOfFileSaved++;
$scope.$apply();
}
function uploadFailed(evt) {
document.getElementById('P' + index).innerHTML = '<span style="color:Red;font-weight:bold;font-style: oblique">Upload Failed..</span>';
}
function uploadCanceled(evt) {
document.getElementById('P' + index).innerHTML = '<span style="color:Red;font-weight:bold;font-style: oblique">Canceled..</span>';
}
}
});

Code description

This part controls file upload progress and tracking of the files, using AngularJS.

The module to develop our Angular Controller is used for the file upload and the code is given below in an Angular Controller with SetFile function.

$scope.setFile = function (element) {
$scope.fileList = [];
Now Get The Multiple files….
var files = element.files;
for (var i = 0; i < files.length; i++) {
$scope.ImageProperty.file = files[i];
$scope.fileList.push($scope.ImageProperty);
$scope.ImageProperty = {};
$scope.$apply();
}

Here, ImageUploadMultipleCtrl is our Controller name. The $scope variable fileList is an array of files, which you selected. This ends our step 1. Run the project and select the multiple files by pressing Ctrl key and you will find the effect given below.

The code given below is an Angular Controller with UploadFile function. Here, I have mentioned UploadFileIndividual Function with the assigned parameter, which is similar to the properties of the files.

$scope.UploadFile = function () {
for (var i = 0; i < $scope.fileList.length; i++) {
$scope.UploadFileIndividual($scope.fileList[i].file,
$scope.fileList[i].file.name,
$scope.fileList[i].file.type,
$scope.fileList[i].file.size,
i);
}
}

Parameters are like name, type/extension, size of the file.

I have developed an upload function with XMLHttpRequest. XMLHttpRequest is an API, which provides client functionality to transfer the data between a client and a Server. It provides an easy way to retrieve the data from a URL without having to do a full page refresh.

XMLHttpRequest was originally designed by Microsoft and is supported by Mozilla, Apple and Google.

I chose XMLHttpRequest for the reasons given below.

It provides us asynchronous upload of the multiple files.
It provides a way for tracking the progress of each file.

I have all the files in an array named fileList, so loop through the fileList and get each file from the list with the name, size, type and send all to another function to upload, so add two functions at our Controller at imageUploadMultipleController.js.

UploadFile - This function calls when we click Upload button.
UploadFileIndividual function has parameters like fileToUpload, name, type, size, index- It is responsible to upload an indivudual file. It takes 4 parameters; i.e., the file to upload, the file name, the file type, file size and an index.

$scope.UploadFile = function () {
for (var i = 0; i < $scope.fileList.length; i++) {
$scope.UploadFileIndividual($scope.fileList[i].file,
$scope.fileList[i].file.name,
$scope.fileList[i].file.type,
$scope.fileList[i].file.size,
i);
}
}
$scope.UploadFileIndividual = function (fileToUpload, name, type, size, index) {
var reqObj = new XMLHttpRequest();
reqObj.upload.addEventListener("progress", uploadProgress, false)
reqObj.addEventListener("load", uploadComplete, false)
reqObj.addEventListener("error", uploadFailed, false)
reqObj.addEventListener("abort", uploadCanceled, false)
reqObj.open("POST", "/FileUpload/UploadFiles", true);
reqObj.setRequestHeader("Content-Type", "multipart/form-data");
reqObj.setRequestHeader('X-File-Name', name);
reqObj.setRequestHeader('X-File-Type', type);
reqObj.setRequestHeader('X-File-Size', size);
reqObj.send(fileToUpload);
function uploadProgress(evt) {
if (evt.lengthComputable) {
var uploadProgressCount = Math.round(evt.loaded * 100 / evt.total);
document.getElementById('P' + index).innerHTML = uploadProgressCount;
if (uploadProgressCount == 100) {
document.getElementById('P' + index).innerHTML =
'<i class="fa fa-refresh fa-spin" style="color:green;"></i>';
}
}
}
function uploadComplete(evt) {
document.getElementById('P' + index).innerHTML = '<span style="color:Green;font-weight:bold;font-style: oblique">Saved..</span>';
$scope.NoOfFileSaved++;
$scope.$apply();
}
function uploadFailed(evt) {
document.getElementById('P' + index).innerHTML = '<span style="color:Red;font-weight:bold;font-style: oblique">Upload Failed..</span>';
}
function uploadCanceled(evt) {
document.getElementById('P' + index).innerHTML = '<span style="color:Red;font-weight:bold;font-style: oblique">Canceled..</span>';
}
}

Create XMLHttpRequest Object.

var reqObj = new XMLHttpRequest();

The event Handler is defined below.

reqObj.upload.addEventListener("progress", uploadProgress, false)
reqObj.addEventListener("load", uploadComplete, false)
reqObj.addEventListener("error", uploadFailed, false)
reqObj.addEventListener("abort", uploadCanceled, false)

Open the object and set method of call : get/post, url to call, isasynchronous : true/False.

reqObj.open("POST", "/FileUpload/UploadFiles", true);

Set Content-Type at request header. For file upload, it's value must be multipart/form-data.

reqObj.setRequestHeader("Content-Type", "multipart/form-data");

Set other header like file name, size and type.

reqObj.setRequestHeader('X-File-Name', name);
reqObj.setRequestHeader('X-File-Type', type);
reqObj.setRequestHeader('X-File-Size', size);

Send the file.

reqObj.send(fileToUpload);

The command given below catches the progress event and pass it to our own function named uploadProgress.

function uploadProgress(evt) {
if (evt.lengthComputable) {
var uploadProgressCount = Math.round(evt.loaded * 100 / evt.total);
document.getElementById('P' + index).innerHTML = uploadProgressCount;
if (uploadProgressCount == 100) {
document.getElementById('P' + index).innerHTML =
'<i class="fa fa-refresh fa-spin" style="color:green;"></i>';
}
}
}

In uploadProgress function, I have mentioned color of the progress control. When upload completes, then it shows a Spinner icon until the Server sends back a response.

if (uploadProgressCount == 100) {
document.getElementById('P' + index).innerHTML =
'<i class="fa fa-refresh fa-spin" style="color:green;"></i>';
}

The events mentioned below are raised when the Server sends back a response.

To Save status with the color, proceed, as shown below.

function uploadComplete(evt) {
document.getElementById('P' + index).innerHTML = '<span style="color:Green;font-weight:bold;font-style: oblique">Saved..</span>';
$scope.NoOfFileSaved++;
$scope.$apply();
}

For Upload Failed status with color, proceed, as shown below.

function uploadFailed(evt) {
document.getElementById('P' + index).innerHTML = '<span style="color:Red;font-weight:bold;font-style: oblique">Upload Failed..</span>';
}

For Canceled status with color, proceed, as shown below.

function uploadCanceled(evt) {
document.getElementById('P' + index).innerHTML = '<span style="color:Red;font-weight:bold;font-style: oblique">Canceled..</span>';
}

XMLHttpRequest object returns the status of an each event of each file. By writing an event handler function, we can access return status. We can add EventListener method of XMLHttpRequest object to handle the event . XMLHttpRequest raises an event at the different status of uploading.

Progress - It is raised during the upload process and sends us the necessary information on the progress status.
Load - It is raised after the uploaded file is saved at the destination and the Server sends back a response.
Error - it raises imediately, if any error occurs during the upload.
Abort - It raises imediately, if the user cancels the upload process.

The code mentioned above described how to develop an Upload functionality with XMLHttpRequest.

Step 4

Code ref of Module.js

var app = angular.module('AgApp', []);

Code description

Now, use the module to develop Angular Controller for the file upload.

Step5

Create a controller class file named FileUploadController.cs.

ASP.NET MVC Controller helps to receive the object sent by XMLHttpRequest.

Code ref of FileUploadController.cs

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace SatyaFileUploadAngularJS.Controllers
{
public class FileUploadController : Controller
{
public ActionResult UploadMultipleFile()
{
return View();
}
[HttpPost]
public virtual string UploadFiles(object obj)
{
var length = Request.ContentLength;
var bytes = new byte[length];
Request.InputStream.Read(bytes, 0, length);
var fileName = Request.Headers["X-File-Name"];
var fileSize = Request.Headers["X-File-Size"];
var fileType = Request.Headers["X-File-Type"];
var saveToFileLoc = "D:\\Images\\" + fileName;
var fileStream = new FileStream(saveToFileLoc, FileMode.Create, FileAccess.ReadWrite);
fileStream.Write(bytes, 0, length);
fileStream.Close();
return string.Format("{0} bytes uploaded", bytes.Length);
}
}
}

Code description

Here, I assigned the code to add headers.

var fileName = Request.Headers["X-File-Name"];
var fileSize = Request.Headers["X-File-Size"];
var fileType = Request.Headers["X-File-Type"];

The uploaded file path is given below.

var saveToFileLoc = "D:\\Images\\" + fileName;

Save file functionality is written here.

var fileStream = new FileStream(saveToFileLoc, FileMode.Create, FileAccess.ReadWrite);
fileStream.Write(bytes, 0, length);
fileStream.Close();
return string.Format("{0} bytes uploaded", bytes.Length);

Step 6

Create a view named UploadMultipleFile.cshtml.

I used HTML input tag, using ASP.NET MVC to input multiple/ single file upload.

Code ref

<html ng-app="AgApp">
<head>
<meta name="viewport" content="width=device-width" />
<title>Satyaprakash File Upload AngularJS</title>
<link href="~/App_Content/CSS/bootstrap.min.css" rel="stylesheet" />
<link href="~/App_Content/CSS/font-awesome.min.css" rel="stylesheet" />
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button4 {
border-radius: 9px;
}
</style>
</head>
<body>
<h2 style="background-color: Yellow;color: Blue; text-align: center; font-style: oblique">Satya's File Upload using AngularJS</h2>
<fieldset>
<legend style="font-family:Arial Black;color:blue">Upload Multiple Files Here</legend>
<div ng-controller="ImageUploadMultipleCtrl">
<div class="col-md-12" style="text-align:center;margin-bottom:10px;">
<input type="file" id="file" name="file" multiple onchange="angular.element(this).scope().setFile(this)" accept="image/*" class="btn btn-primary" />
</div>
<div class="col-md-12">
<button ng-click="UploadFile()" class="button button4">Upload</button>
</div>
<div class="col-md-12" style="padding-top:10px;">
<div class="col-md-7">
<table align="center" border="1" cellpadding="4" cellspacing="4">
<thead>
<tr>
<th style="background-color: Yellow;color: blue">File Name</th>
<th style="background-color: Yellow;color: blue">File Type</th>
<th style="background-color: Yellow;color: blue">File Size</th>
<th style="background-color: Yellow;color: blue">Status</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="file in fileList">
<td style="color: blue">{{file.file.name}}</td>
<td style="color: blue">{{file.file.type}}</td>
<td style="color: blue">{{file.file.size}}</td>
<td>
<div id="{{'P'+$index}}">
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="~/App_Content/JS/jquery-1.7.2.min.js"></script>
<script src="~/App_Content/JS/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/App_Content/JS/angular.min.js"></script>
<script src="~/App_Content/JS/Practical/Module.js"></script>
<script src="~/App_Content/JS/Practical/ImageUploadMultipleController.js"></script>
</fieldset>
<br />
<br />
<footer>
<p style="background-color: Yellow; font-weight: bold; color:blue; text-align: center; font-style: oblique">© @DateTime.Now.ToLocalTime()</p> @*Add Date Time*@
</footer>
</body>
</html>

Code description

ng‐app="AgApp" we bootstrap an Angular Application.
ng‐controller="ImageUploadMultipleCtrl" specifies the Controller for this page, which contains the code to show the selected file information and file upload function.

<input type="file" id="file" name="file" multiple onchange="angular.element(this).scope().setFile(this)" accept="image/*" class="btn btn-primary" />

This enables us to input the multiple files and onchange event, we call setFile function, which is an Angular function. This function collects all the files, which you selected and put into a $scope variable name fileList.
We loop through the fileList by <tr ng‐repeat="file in fileList"> to show the file information.
Each file has 3 auto property names, types and sizes. Thes 3 properties of files can be accessed directly.

I have added Bootstrap related files here.

<link href="~/App_Content/CSS/bootstrap.min.css" rel="stylesheet" />
<link href="~/App_Content/CSS/font-awesome.min.css" rel="stylesheet" />

I have added style to Button and table control.

<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button4 {
border-radius: 9px;
}
</style>

For loading jQuery, proceed, as shown below.

<script src="~/App_Content/JS/jquery-1.7.2.min.js"></script>
<script src="~/App_Content/JS/jquery.unobtrusive-ajax.min.js"></script>

Loading Angular JS i

<script src="~/App_Content/JS/angular.min.js"></script>

Load our Angular Application

<script src="~/App_Content/JS/Practical/Module.js"></script>

Load the page Controller

<script src="~/App_Content/JS/Practical/ImageUploadMultipleController.js"></script>

Proceed, as shown below.

<div class="col-md-12" style="text-align:center;margin-bottom:10px;">
<input type="file" id="file" name="file" multiple onchange="angular.element(this).scope().setFile(this)" accept="image/*" class="btn btn-primary" />
</div>

I added the code for the button to upload the files and save it in the destination directory.

<div class="col-md-12">
<button ng-click="UploadFile()" class="button button4">Upload</button>
</div>

I added for the table headers.

<th style="background-color: Yellow;color: blue">File Name</th>
<th style="background-color: Yellow;color: blue">File Type</th>
<th style="background-color: Yellow;color: blue">File Size</th>
<th style="background-color: Yellow;color: blue">Status</th>

I added for the header data, which is based on selected file properties.

<tr ng-repeat="file in fileList">
<td style="color: blue">{{file.file.name}}</td>
<td style="color: blue">{{file.file.type}}</td>
<td style="color: blue">{{file.file.size}}</td>
<td>
<div id="{{'P'+$index}}">
</div>
</td>
</tr>

The status part will show file progress count and the status of the uploaded file.

<td>
<div id="{{'P'+$index}}">
</div>
</td>

Step7

Add the code for Web.Config file.

Change the Maximum Upload length in Web.config. In <system.web> section, change the http in the way given below.

Code ref

<?xml version="1.0" encoding="utf-8"?>
<configuration>
<appSettings>
<add key="webpages:Version" value="3.0.0.0" />
<add key="webpages:Enabled" value="false" />
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>
<system.web>
<compilation debug="true" targetFramework="4.5" />
<httpRuntime targetFramework="4.5" maxRequestLength="1048576" />
</system.web>
<system.webServer>
<security>
<requestFiltering>
<requestLimits maxAllowedContentLength="1073741824" />
</requestFiltering>
</security>
</system.webServer>
</configuration>

Code description

In <system.web> section, change the http in the way given below.

<httpRuntime targetFramework="4.5" maxRequestLength="1048576" />

Add/Update <system.webServer> section in the way given below.

<system.webServer>
<security>
<requestFiltering>
<requestLimits maxAllowedContentLength="1073741824" />
</requestFiltering>
</security>
</system.webServer>

NOTE

The value maxRequestLength in <system.web> and maxAllowedContentLength in <system.webserver> must be same.

Step 8

Set start page in MVC, using Controller name and controller action method.

Code ref of RouteConfig.cs

routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "FileUpload", action = "UploadMultipleFile", id = UrlParameter.Optional }
);