In this article we will see how we can upload multiple files using AJAX uploader with drag and drop functionality and also with a progress bar and storing the file path in database.
Introduction
Couple of days back my friend was assigned a task to upload multiple files with drag and drop functionality showing progress bar.After researching a bit came to know that Microsoft recently had released AJAX File Uploader which fits perfect for this task.
Objective
- Drag and Drop Files
- Upload Multiple files to folder and save the path to database.
- Understand AJAX File Uploader
- Validate file Types
- Restrict No.of Files to be uploaded
Using the code
In order to embed AJAX Control Toolkit please use this article as resource
Follow the 1 - 12 Steps.
Remember :- We are working with AJAX File Up-loader so we need to drag and drop AJAX File Up-loader and not A SYNC Up-loader.
AJAX File Up-loader :-
- AJAX File Up-loader will allow us to upload multiple files to the server asynchronously.This particular control will work best with Browsers that support HTML 5.
- Here are some browsers : - Internet Explorer 10, Mozilla Firefox 9,Safari 5 +
- The control itself has a progress bar that is shown while uploading the files.
- If the browser does not support HTML 5 API for E.g IE 9 or down version,then to show progress bar we can use throbber property of the control and in that we can keep an .GIF Image to show the progress bar.
Here is how the code for AJAX File Uploader Looks like
<asp:AjaxFileUpload ID="ajxFileUpload" runat="server" ThrobberID="Progressbar" AllowedFileTypes="jpg,jpeg,png,gif"
onuploadcomplete="ajxFileUpload_UploadComplete" />
<br />
<br />
Explanation of Throbber Property
ThrobberID = This property will contain the ID of the Image that will show the loading progressbar while a heavy file is uploaded.
Event Name :- OnUploadedComplete
Assigned Function :- ajxFileUpload_UploadComplete
Description :- In this we actually defining the logic to upload the Images using Server.Mappath and using the SAVEAS method to save the image in the folder and then performing SQL Insert Execution.
How to validate file types ?
To validate file types we can use AllowedFileTypes property and can define the extension without (.) in "" such as
E.G:- AllowedFileTypes="jpg,jpeg,png,gif"
Over here only the file types having the above extension.
If you want to restrict the user to upload only 5 files at a time we can use
MaximumNumberOfFiles property and set its value
E.g. :- MaximumNumberOfFiles="5"
This will restrict the user to upload only 5 files at one time
// Tables and Stored Procedure
USE [DNF]
GO
/****** Object: Table [dbo].[Images] Script Date: 07/02/2013 22:29:13 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[Images](
[ID] [int] IDENTITY(1,1) NOT NULL,
[Imagepath] [varchar](max) NULL
) ON [PRIMARY]
GO
SET ANSI_PADDING OFF
GO
USE [DNF]
GO
/****** Object: StoredProcedure [dbo].[GetImages] Script Date: 07/02/2013 22:29:20 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
create proc [dbo].[GetImages]
as
begin
select * from Images
end
GO
USE [DNF]
GO
/****** Object: StoredProcedure [dbo].[InsertImages] Script Date: 07/02/2013 22:29:37 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
create proc [dbo].[InsertImages]
(
@Imagepath varchar(max)
)
as
begin
insert into Images(Imagepath) values(@Imagepath)
end
GO
HTML Mark UP
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DragandDropContril.aspx.cs" Inherits="DragandDropContril" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!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 runat="server">
<title></title>
<style type="text/css">
#form1
{
text-align: center;
}
.style1
{
font-family: "Copperplate Gothic Bold";
font-size: x-large;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:toolkitscriptmanager ID="Toolkitscriptmanager1" runat="server"></asp:toolkitscriptmanager>
<br />
<span class="style1">Using AJAX File Uploader to Upload Multiple files with
Progress bar
<br />
with<br />
drag and drop functionality.</span><div>
<br />
<br />
<asp:AjaxFileUpload ID="ajxFileUpload" runat="server" ThrobberID="Progressbar" AllowedFileTypes="jpg,jpeg,png,gif"
onuploadcomplete="ajxFileUpload_UploadComplete" />
<br />
<br />
<asp:Image ID="Progressbar" ImageUrl="~/Images/04.gif" Style="display:None" runat="server" />
</div>
</form>
</body>
</html>
Code Behind.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
public partial class DragandDropContril : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void ajxFileUpload_UploadComplete(object sender, AjaxControlToolkit.AjaxFileUploadEventArgs e)
{
// Getting the File Name
string filename = e.FileName;
// Setting the path to upload Images
ajxFileUpload.SaveAs(Server.MapPath("Images/") + filename);
// Storing the relative path to store into images
string Imagepath = "~/Images/" + filename;
// Opening the Connection for SQL Injection
SqlConnection con = new SqlConnection("Data Source=AG-KKC;Initial Catalog=DNF;Persist Security Info=True;User ID=sa;Password=sqluser");
con.Open();
SqlCommand insertpathindb = new SqlCommand("InsertImages", con);
insertpathindb.CommandType = CommandType.StoredProcedure;
insertpathindb.Parameters.AddWithValue("@Imagepath", SqlDbType.VarChar).Value = Imagepath;
insertpathindb.ExecuteNonQuery();
con.Close();
}
}
Drag and Drop Functionality
Uploading Files with Progress bar
Screen 3 :- New Record created for each Image path storage in database.
Conclusion
If you don't want to use drag and drop or if the browser does not support then you can select files for Uploading.
Note :- To select multiple files Press CTRL and select the files.