connectseekers.com

Tuesday, 10 June 2014

Ajax FileUpload Control In Asp.Net or Multiple FileUpload With Progress Example in Asp.Net Using C#.Net

6/10/2014 - By Pranav Singh 19

In this article I will show you how you can perform ajax file upload in your asp.net application. In this article I have used Asp.Net, AjaxFileUpload, and C#.Net.


So for this article first you needed to create a new asp.net application and add AjaxFileUpload control, and script manager. After adding the controls your page will look as shown below.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxFileUpload.aspx.cs"
    Inherits="ProjectDemo_Asp.et.AjaxFileUpload" %>

<%@ 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>Ajax FileUpload Control In Asp.Net or Multiple FileUpload With Progress Example
        in Asp.Net</title>
</head>
<body>
    <form id="form1" runat="server">
    <h3>
        Ajax FileUpload
    </h3>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:AjaxFileUpload ID="AjaxFileUpload11" runat="server" MaximumNumberOfFiles="10"
        OnUploadComplete="AjaxFileUploadEvent" Width="500px" />
    </form>
</body>
</html>

In above code we have set some property for the AjaxFileUpload.  They are as follows:
MaximumNumberOfFiles : In this we have defined the maximum no of files to be allowed to upload at a time.
OnUploadComplete: In this we will define the upload function as an event to upload the file in specified folder.
Width: In this we will define the control width.

Now here is the server code which we will used  for saving the uploaded file.

C#.Net
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using AjaxControlToolkit;

namespace ProjectDemo_Asp.et
{
    public partial class AjaxFileUpload : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
        protected void AjaxFileUploadEvent(object sender, AjaxFileUploadEventArgs e)
        {
            string filename = System.IO.Path.GetFileName(e.FileName);
            string strUploadPath = "~/Folder/";
            AjaxFileUpload11.SaveAs(Server.MapPath(strUploadPath) + filename);
        }
    }
}

VB.Net
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports AjaxControlToolkit

Namespace ProjectDemo_Asp.et
    Partial Public Class AjaxFileUpload
        Inherits System.Web.UI.Page
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)

        End Sub
        Protected Sub AjaxFileUploadEvent(ByVal sender As Object, ByVal e As AjaxFileUploadEventArgs)
            Dim filename As String = System.IO.Path.GetFileName(e.FileName)
            Dim strUploadPath As String = "~/Folder/"
            AjaxFileUpload11.SaveAs(Server.MapPath(strUploadPath) + filename)
        End Sub
    End Class
End Namespace

Now what you think you will be able to upload the file. No you will not be able to upload the file it will cause error while uploading the files.

So for successful upload we will add an event handler in our web.config file

<?xml version="1.0"?>
<configuration>
 <system.web>
    <httpHandlers>
      <add verb="*" path="AjaxFileUploadHandler.axd"
        type="AjaxControlToolkit.AjaxFileUploadHandler,
          AjaxControlToolkit"/>
    </httpHandlers>
       </system.web>
</configuration>

Now we will create folder in our solution.




Now we have done. View the page in browser you will




After success full upload let’s check the folder weather files have actually uploaded or not. 

About the Author

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Get Updates

Subscribe to our e-mail newsletter to receive updates.

Share This Post

19 comments:

  1. Please let me know you comment..

    ReplyDelete
    Replies
    1. best way for uploading multiple files with ajax fileupload control

      Delete
  2. using AjaxControlToolkit;
    makes Error,
    Where I will get the assemby sir

    ReplyDelete
    Replies
    1. Hi Sagar
      First thanks for posting your comment. for getting AjaxcontrolToolkit reference you need to download AjaxcontrolToolkit library from asp.net website. please check the link. in this download you will get AjaxcontrolToolkit .dll .

      http://ajaxcontroltoolkit.codeplex.com/

      Delete
  3. Hi sagar this link may help you please check

    http://www.aspdotnet-pools.com/2014/06/how-to-use-and-install.html

    ReplyDelete
  4. The name of the event is 'OnClientUpdateComplete' and not 'OnUploadComplete' in Version 3.5 and 4.0. Control does not render when I define a function for this event, only black box ist displayed, found out the website raises javascript error about a mission function then.
    Also the control needs the TolkitScriptManager in order to run properly.
    Ether there is something mystic involved or the control is broken! Cant go deeper in this, wasted my whole workday on this!!!

    ReplyDelete
    Replies
    1. Hi, The above provided is working file. after your comment i am attaching the demo of the article. please check the link. If you are getting error. it may happen that your library is not proper please download it again or you are missing your web.config setting which is





      demo download :
      https://app.box.com/s/aa0fjddei0yilobvwcts

      Delete
    2. please check the web.config configuration mention in above article.

      Delete
  5. follow this great example

    http://aspsolutionkirit.blogspot.in/2014/07/use-file-upload-control-in-gridview-in.html

    ReplyDelete
  6. see this is very good and easier way for multiple file uploading

    http://aspwebdeveloper.blogspot.in/2014/11/multiple-fileupload-using-aspnet.html

    ReplyDelete
  7. Hi when i try to execute the above program i am getting the following error
    HTTP Error 500.23 - Internal Server Error
    An ASP.NET setting has been detected that does not apply in Integrated managed pipeline mode.
    I am using ajaxcontrolToolkit 4.5
    Please tell me how to solve this error

    ReplyDelete
    Replies
    1. Hi please check the some of the solution for the error.

      http://stackoverflow.com/questions/4209999/an-asp-net-setting-has-been-detected-that-does-not-apply-in-integrated-managed-p

      http://stackoverflow.com/questions/16897262/http-error-500-23-internal-server-error

      http://www.codeproject.com/Questions/585641/HTTPplusErrorplus-plus-plusInternalplusServer

      http://forums.iis.net/t/1161020.aspx?HTTP+Error+500+23+How+do+i+solve+this+

      Delete
  8. hi, I am able to upload the files locally on my PC. but on the web server, I see it goes to 100%, and then errored.

    ReplyDelete
  9. Hi, I got this error when loading the aspx page.
    Parser Error Message: Could not load type 'AjaxControlToolkit.AjaxFileUploadHandler' from assembly 'AjaxControlToolkit'.
    Source error:
    Line 13:
    Line 14:
    Line 15:

    ReplyDelete
    Replies
    1. Hi
      Please check the below mention link for solution.

      http://forums.asp.net/t/1692536.aspx?Solution+of+Could+not+load+type+AjaxControlToolkit+ToolkitScriptManager+from+assembly+AjaxControlToolkit+Version+3+5+40412+0+Culture+neutral+PublicKeyToken+28f01b0e84b6d53e+

      http://stackoverflow.com/questions/16814310/ajaxcontroltoolkit-error-raising-upload-complete-event-and-start-new-upload
      http://stackoverflow.com/questions/23502160/asp-net-ajax-and-could-not-load-type

      Delete
  10. Hi
    i am not able to upload ,whenever i click on upload button nothing is happening, I have written handlers also in web .config ,but then also nothing is happening.

    ReplyDelete
  11. In IE browser i can't see drag and drop option from one server where as same configuration working fine in different server. even its not displaying drag and drop box. both servers are windows 2008.

    Any section is blocking in the server.

    ReplyDelete

Please let me know your view

Free Ebooks


About Us

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Contact Us

For writing article in this website please send request by your

GMAIL ID: dotnetpools@gmail.com
Email Id : contact@aspdotnet-pools.com

Bugs and Suggestions

As we all know that this website is for sharing knowledge and providing proper solution. So while reading the article is you find any bug or if you have any suggestion please mail us at contact@aspdotnet-pools.com.

Partners


Top jQuery Plugins

Global Classified : Connectseekers.com
© 2014
back to top