[X]

ASP.Net - Uploading Multiple Files Like Gmail / Orkut

C#/Asp.Net - Uploading multiple files like Gmail/Orkut

There are several ways of supporting multiple file upload in asp.net based on the requirements. Below are few ways that we can do coding to support multiple file uploads in asp.net:

1. If we fix number of files to be uploaded, we can place that many FileUpload control while designing the page.

2. But if we dont know how many files user will select like Gmail/Orkut, we can achieve this with JavaScript by creating controls on fly on the page and iterating through the HttpFileCollection class in asp.net/c#.

So lets see the complete code. Screenshots of the code:

 

Default.aspx Page Code:

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ContactUs.aspx.cs" Inherits="MultiFileUpload.ContactUs" %>

<!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 id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div id="uploadArea">
        <input type="file" id="File1" runat="server" size="60" />
    </div>
    <br />
    <p>
        <input type="button" value="Add File" onclick="AddFileUploadControl();" />
         
        <asp:Button ID="btnUploadFiles" runat="server" OnClick="btnUploadFiles_Click" Text="Upload Files" Width="125" />
    </p>
    <p>
        <asp:Literal ID="litResult" runat="server"></asp:Literal>
    </p>

    <script type="text/javascript">
        function AddFileUploadControl() {
            if (!document.getElementById || !document.createElement) {
                alert("Your browser does not support multiple file upload.");
                return false;
            }
            var uploadArea = document.getElementById("uploadArea");
            if (!uploadArea)
                return;
            var newLine = document.createElement("br");
            uploadArea.appendChild(newLine);
            var newFile = document.createElement("input");
            newFile.type = "file";
            newFile.size = "60";
            if (!AddFileUploadControl.lastAssignedId)
                AddFileUploadControl.lastAssignedId = 1000;
            newFile.setAttribute("id", "dynamic" + AddFileUploadControl.lastAssignedId);

            newFile.setAttribute("name", "dynamic" + AddFileUploadControl.lastAssignedId);

            uploadArea.appendChild(newFile);
            AddFileUploadControl.lastAssignedId++;
        }
    </script>

    </form>
</body>
</html>

 

 


Default.aspx.cs Page Code:

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace MultiFileUpload
{
    public partial class ContactUs : System.Web.UI.Page
    {
        public string UploadPath
        {
            get
            {
                return @"C:\UploadedFiles\";
            }
        }

        protected void Page_Load(object sender, EventArgs e)
        {
        }

        protected void btnUploadFiles_Click(object sender, EventArgs e)
        {
            if (!System.IO.Directory.Exists(UploadPath))
            {
                System.IO.Directory.CreateDirectory(UploadPath);
            }

            System.Text.StringBuilder sb = new System.Text.StringBuilder();
            HttpFileCollection uploads = HttpContext.Current.Request.Files;

            for (int i = 0; i < uploads.Count; i++)
            {
                HttpPostedFile upload = uploads[i];
                string c = System.IO.Path.GetFileName(upload.FileName); // We don't need the path,        just the name.

                if (upload.ContentLength == 0)
                {
                    sb.AppendLine("File: " + c + " upload canceled, no data to save.");
                    sb.AppendLine("<br>");
                    continue;
                }
                try
                {
                    upload.SaveAs(UploadPath + c);
                    sb.AppendLine("File: " + c + " uploaded successfully.");
                    sb.AppendLine("<br>");
                }
                catch (Exception ex)
                {
                    sb.AppendLine("File: " + c + " upload failed. Error: " + ex.Message.Substring(0,40) + "...");
                    sb.AppendLine("<br>");
                }
            }
            litResult.Text = sb.ToString();
        }
    }
}

 

*Latest Updates:

If you don't want to code it for your self, there is a project "NeatUpload" on "CodePlex". you can use it for free.

Project Description:
It features several custom controls, including:

  • MultiFile allows all users to select multiple files to upload and allows Flash 8+ users to select multiple files from a single file selection dialog.
  • ProgressBar displays the upload progress either inline or in a popup.
  • UnloadConfirmer prevents users from accidentally interrupting an upload by leaving the page.

Download Sample Code: GmailLike_MultiFileUploads.zip (2.26 kb)

blog comments powered by Disqus

Posts By Month