Upload Audio file in Folder Directory using AngularJS and ASPNet MVC

In this article I will explain with an example, how to upload Audio files (mp3 and m4a) to a Folder (Directory) with Progress Bar using AngularJS in ASP.Net MVC.

This article makes use of ngFileUpload AngularJS module for uploading Audio file using AngularJS in ASP.Net MVC.

Note: For beginners in ASP.Net MVC, please refer my article ASP.Net MVC Hello World Tutorial with Sample Program example.

Namespaces

You will need to import the following namespace.

using System.IO;

Controller

The Controller consists of following Action methods.

Action method for handling GET operation

Inside this Action method, simply the View is returned.

Action method for handling POST operation

This Action method handles the call made by the AngularJS function in the View.

Note: The following Action method handles AJAX calls and since a String value is returned, the return type is set to ContentResult. For more details on ContentResult, please refer my article ASP.Net MVC ContentResult Example: Return String Content from Controller to View in ASP.Net MVC.

First, the path of the Folder (Directory) where uploaded files will be saved is referenced.

Then, a check is performed whether Folder (Directory) exists, if not then the Folder (Directory) is created.

A FOR EACH loop is executed over the selected files using Request.Files collection and each file is saved in the Folder (Directory) named Uploads using SaveAs method of HttpPostedFileBase class.

Finally, a success response is sent back to the AngularJS client.

public class HomeController : Controller

{

// GET: Home

public ActionResult Index()

{

return View();

}

[HttpPost]

public ContentResult Upload()

{

string path = Server.MapPath("~/Uploads/");

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");

}

View

HTML Markup

Inside the View, the following script files are inherited.

1. angular.min.js

2. ng-file-upload.min.js

The HTML of the View consists of:

div – For applying ng-app and ng-controller AngularJS directives.

Note: If you want to learn more about these directives, please refer my article Introduction to AngularJS.

FileUpload – For uploading file.

The HTML INPUT FileUpload has been assigned with the following AngularJS directive.

ngf-select – For handling file uploads.

The HTML FileUpload has been set with the following attributes.

multiple – This attribute allows user to select multiple files.

accept – This attribute allows user to select only specified type of files from the Choose File dialog box. In this case it is mp3 and m4a.

Note: For more details on how to use accept attribute, please refer my article INPUT 'type=file' accept Audio file in HTML.

The HTML DIV also consists of an UL with LI element which is used to display the selected files name.

The LI element has been assigned with the following AngularJS directive.

ng-repeat – For repeating the element based on the length of the collection.

Note: If you want to learn more about ng-repeat directive, please refer my article AngularJS ng-repeat example: Populate (Bind) HTML Select DropDownList with Options.

div – For displaying Progress Bar.

The HTML DIV has been assigned with the following AngularJS directive.

ng-show – For showing the elements.

Note: If you want to learn more about ng-show directive, please refer my article Simple AngularJS ng-show and ng-hide Tutorial with example.

When files are selected in the HTML FileUpload element, it makes call to the UploadFiles function inside the AngularJS Controller.

Inside the UploadFiles function, the selected files are sent to the Controller’s Action method using the Upload function of the ngFileUpload AngularJS module.

Finally, the Timeout function has been used which periodically checks the response of the upload and it updates the Progress Bar.

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<title>Index</title>

</head>

<body>

var app = angular.module('MyApp', ['ngFileUpload'])

app.controller('MyController', function ($scope, Upload, $timeout) {

$scope.UploadFiles = function (files) {

$scope.SelectedFiles = files;

if ($scope.SelectedFiles && $scope.SelectedFiles.length) {

Upload.upload({

url: '/Home/Upload/',

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('#dvProgress'));

$scope.Progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));

element.html('<div style="width: ' + $scope.Progress + '%">' + $scope.Progress + '%</div>');

});

}

};

});

</script>

<hr />

Files:

</div>

</body>

</html>

Permitting uploading Large files in the Web.Config file

In order to upload large files, you will need to add the following settings in the Web.Config file as shown below.

1. Set the following setting in the system.web section of the Web.Config file. The executionTimeout value is set to 540 seconds while the maxRequestLength is set to the maximum size of the files in Bytes.

2. Set the following setting in the system.webServer section of the Web.Config file. The maxAllowedContentLength is set to the maximum size of the files in Bytes.