Monday, 11 June 2012

Upload Multiple Attachment in Email With Progress Bar Using Uploadify in asp.net

We develop a system where users can select multiple files at a time and upload it one by one or in parallel with a progress bar and cancel button near it, simply like a GMAIL style upload system.

Something like:

1. Select multiple files


2. Upload multiple files


How to do this?

 

This can be done very easily by using a JQuery file upload plug-in called Uploadify which uses flash for rich Ajax like interface.

If you are not familiar with Uploadify here is a description from their web site:
"Uploadify is a jQuery plugin that integrates a fully-customizable multiple file upload utility on your website. It uses a mixture of JavaScript, ActionScript, and any server-side language to dynamically create an instance over any DOM element on a page."
You will need to download the JQuery plugin. Download this plugin from here.
http://www.uploadify.com/download/
after u download this file, extract this folder and put it in the root folder of your project. I add it into my "_scripts" folder like:


Now Add code in your aspx page ("Default.aspx")

<head>
<link href="_scripts/uploadify.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="_scripts/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="_scripts/swfobject.js"></script>
    <script type="text/javascript" src="_scripts/jquery.uploadify.v2.1.4.min.js"></script>
    <title>Multiple Upload</title>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#fuFiles').uploadify({
                'uploader': '_scripts/uploadify.swf',
                'script': 'Default.aspx',
                'cancelImg': '_scripts/cancel.png',
                'auto': 'true',
                'multi': 'true',
                'buttonText': 'Add Attachment',
                'queueSizeLimit': 5,
                'simUploadLimit': 1,
                'fileExt': '*.pdf;*.txt;*.doc',
                'fileDesc': 'text Files',
                'sizeLimit': 5242880 // The size limit in bytes for each file upload(5MB).
            });
        });
    </script>  
</head>
<body>
 <form id="form1" runat="server">
 <div id="fuFiles"> 
  </div>
</form>
</body>

Add code in Default.aspx.cs


    HttpPostedFile postedFile;
    public string DestinationPath;
    protected void Page_Load(object sender, EventArgs e)
    {
       
        postedFile = Request.Files["FileData"];
        if (postedFile != null)
        {
            DestinationPath = Server.MapPath("~/Uploads//" + postedFile.FileName);
            postedFile.SaveAs(DestinationPath);
        }
    }

Download Files  MultipleUploads.rar

It's done just run your Default.aspx page and click on "Add Attachment" button to upload the file.if u face any problem feel free to comment.

8 comments:

  1. really nyc article..really helped me a lot

    ReplyDelete
  2. This article is not matching with the heading of the article name.

    ReplyDelete
    Replies
    1. Vikash, from my side it is right. Can you explain me your view ?

      Delete
  3. I have folllwed your approach what u have given but i am unable to see the add attachment button.

    ReplyDelete
  4. after upload i save file in folder but not delete file from folder when delete
    uploaded file. plz help me

    ReplyDelete
  5. The third party Gmail customer support services are highly competitive and efficient. Due to their excellent past records and performances, they are the most reliable and fastest customer service providers in recent years.Gmail Support Number

    ReplyDelete