asp net multiple file upload with progress bar

Link for all dot net and sql server video tutorial playlists
https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1

Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspot.com/2015/07/aspnet-multiple-file-upload-with.html

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1

In this video we will discuss, using jQuery progressbar with asp.net file upload control.

While the files are being uploaded we want to display the jQuery progress bar. As soon as the upload is complete, we want to display complete message in the progress bar, and it should slowly fade out.

UploadHandler.ashx Code

using System.IO;
using System.Web;
namespace Demo
{
public class UploadHandler : IHttpHandler
{

public void ProcessRequest(HttpContext context)
{
if (context.Request.Files.Count > 0)
{
HttpFileCollection selectedFiles = context.Request.Files;
for (int i = 0; i < selectedFiles.Count; i++)
{
System.Threading.Thread.Sleep(1000);
HttpPostedFile PostedFile = selectedFiles[i];
string FileName = context.Server.MapPath(“~/Uploads/”
+ Path.GetFileName(PostedFile.FileName));
PostedFile.SaveAs(FileName);
}
}
}

public bool IsReusable
{
get
{
return false;
}
}
}
}

WebForm code

<%@ Page Language=”C#” AutoEventWireup=”true”
CodeBehind=”WebForm1.aspx.cs” Inherits=”Demo.WebForm1″ %>

<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title></title>
<script src=”jquery-1.11.2.js”></script>
<script src=”jquery-ui.js”></script>
<link href=”jquery-ui.css” rel=”stylesheet” />
<script type=”text/javascript”>
$(document).ready(function () {
$(“#btnUpload”).click(function (event) {
var files = $(“#FileUpload1″)[0].files;
if (files.length > 0) {
var formData = new FormData();
for (var i = 0; i < files.length; i++) {
formData.append(files[i].name, files[i]);
}

var progressbarLabel = $(‘#progressBar-label’);
var progressbarDiv = $(‘#progressbar’);

$.ajax({
url: ‘UploadHandler.ashx’,
method: ‘post’,
data: formData,
contentType: false,
processData: false,
success: function () {
progressbarLabel.text(‘Complete’);
progressbarDiv.fadeOut(2000);
},
error: function (err) {
alert(err.statusText);
}
});

progressbarLabel.text(‘Uploading…’);
progressbarDiv.progressbar({
value: false
}).fadeIn(500);
}
});
});
</script>

</head>
<body style=”font-family: Arial”>
<form id=”form1″ runat=”server”>
Select Files :
<asp:FileUpload ID=”FileUpload1″ runat=”server” AllowMultiple=”true” />
<br /><br />
<input type=”button” id=”btnUpload” value=”Upload Files” />
<br /><br />
<div style=”width: 300px”>
<div id=”progressbar” style=”position: relative; display: none”>
<span style=”position: absolute; left: 35%; top: 20%” id=”progressBar-label”>
Uploading…
</span>
</div>
</div>
</form>
</body>
</html>

Please note : contentType option should be set to false to tell jQuery to not set any content type header. processData option should also be set to false, otherwise, jQuery will try to convert your FormData into a string, which will fail.