ASP.NET - File upload

Asked By Gunasundari Loganathan on 14-Feb-12 05:07 AM

Hi all,
I want to upload multible files using file upload control at a time. how to code for this.I am using C# for coding

kalpana aparnathi replied to Gunasundari Loganathan on 14-Feb-12 05:10 AM

Refer this article for solution:http://msdn.microsoft.com/en-us/library/aa479405.aspx

Regards,

Somesh Yadav replied to Gunasundari Loganathan on 14-Feb-12 05:12 AM

Hi,
try this,

protected void btnUpload_Click(object sender, EventArgs e)

{

try

{

// Get the HttpFileCollection

HttpFileCollection hfc = Request.Files;

for (int i = 0; i < hfc.Count; i++)

{

HttpPostedFile hpf = hfc[i];

if (hpf.ContentLength > 0)

{

hpf.SaveAs(Server.MapPath("MyFiles") + "\\" +

System.IO.Path.GetFileName(hpf.FileName));

Response.Write("<b>File: </b>" + hpf.FileName + " <b>Size:</b> " +

hpf.ContentLength + " <b>Type:</b> " + hpf.ContentType + " Uploaded Successfully <br/>");

}

catch (Exception ex)

{

}

}

For more information refer to the below link.
http://www.dotnetcurry.com/ShowArticle.aspx?ID=317

i hope it will help you.

kalpana aparnathi replied to Gunasundari Loganathan on 14-Feb-12 05:13 AM

hi,

Here link:
http://msdn.microsoft.com/en-us/library/aa478971.aspx
http://aspalliance.com/1221_CodeSnip_Uploading_Multiple_Files_At_Once.all

Regards,

Web Star replied to Gunasundari Loganathan on 14-Feb-12 05:32 AM

upload multiple files AJAX style along with progress bar similar to the Google’s GMAIL
http://www.aspsnippets.com/Articles/Select-and-Upload-Multiple-Files-Gmail-Style-using-JQuery-and-ASP.Net.aspx

Also Check out the video here...
http://www.asp.net/learn/videos/video-252.aspx
It shows the process of multiple file uploading

Reena Jain replied to Gunasundari Loganathan on 14-Feb-12 05:46 AM

Hi,

Well there is no control in asp.net standard controls with which you can upload all the files or more than one file in one click. Asp.net does allow you to upload file one by one.As far as I know, usually we use Zip the files or mutiple files upload to achieve it. There are two links as followings about uploading mutiple files.

you use HtmlInputFile control toUpload multiple files. here is a good link for this

http://dotnetslackers.com/articles/aspnet/Upload_multiple_files_using_the_HtmlInputFile_control.aspx

This link is about Zip files: http://forums.asp.net/t/1193746.aspx

Hope this will help you

dipa ahuja replied to Gunasundari Loganathan on 14-Feb-12 06:42 AM

<script type="text/javascript">

var counter = 0;

function AddFileUpload()

{

var div = document.createElement('DIV');

div.innerHTML = '<input id="file' + counter + '" name = "file' + counter + '" type="file" /><input id="Button' + counter + '" type="button" value="Remove" onclick = "RemoveFileUpload(this)" />';

document.getElementById("FileUploadContainer").appendChild(div);

counter++;

}

function RemoveFileUpload(div)

{

document.getElementById("FileUploadContainer").removeChild(div.parentNode);

}

</script>

<span style="font-family: Arial">Click to add files</span>  

<input id="Button1" type="button" value="add" onclick="AddFileUpload()" />

<div id="FileUploadContainer">

</div>

<br />

<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />

.CS Code

protected void btnUpload_Click(object sender, EventArgs e)

{

for (int i = 0; i < Request.Files.Count; i++)

{

HttpPostedFile PostedFile = Request.Files[i];

if (PostedFile.ContentLength > 0)

{

string FileName = System.IO.Path.GetFileName(PostedFile.FileName);

PostedFile.SaveAs(Server.MapPath("temp\\") + FileName);

}

Suchit shah replied to Gunasundari Loganathan on 14-Feb-12 09:01 AM

Try it on this way

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
    .fileUpload{
    width:255px;
    font-size:11px;
    color:#000000;
    border:solid;
    border-width:1px;
    border-color:#7f9db9;
    height:17px;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div id="fileUploadarea"><asp:FileUpload ID="fuPuzzleImage" runat="server" CssClass="fileUpload" /><br /></div><br />
    <div><input style="display:block;" id="btnAddMoreFiles" type="button" value="Add more images" onclick="AddMoreImages();" /><br />
      <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Upload" />
      </div>
    </div>
    <script language="javascript" type="text/javascript">
      function AddMoreImages() {
        if (!document.getElementById && !document.createElement)
          return false;
        var fileUploadarea = document.getElementById("fileUploadarea");
        if (!fileUploadarea)
          return false;
        var newLine = document.createElement("br");
        fileUploadarea.appendChild(newLine);
        var newFile = document.createElement("input");
        newFile.type = "file";
        newFile.setAttribute("class", "fileUpload");

        if (!AddMoreImages.lastAssignedId)
          AddMoreImages.lastAssignedId = 100;
        newFile.setAttribute("id", "FileUpload" + AddMoreImages.lastAssignedId);
        newFile.setAttribute("name", "FileUpload" + AddMoreImages.lastAssignedId);
        var div = document.createElement("div");
        div.appendChild(newFile);
        div.setAttribute("id", "div" + AddMoreImages.lastAssignedId);
        fileUploadarea.appendChild(div);
        AddMoreImages.lastAssignedId++;
      }

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

I have put css in the same file for clarity.

If you want to restrict user to certain number of files then you can change your javascript function as given below.

function AddMoreImages() {
        if (!document.getElementById && !document.createElement)
          return false;
        var fileUploadarea = document.getElementById("fileUploadarea");
        if (!fileUploadarea)
          return false;
        var newLine = document.createElement("br");
        fileUploadarea.appendChild(newLine);
        var newFile = document.createElement("input");
        newFile.type = "file";
        newFile.setAttribute("class", "fileUpload");

        if (!AddMoreImages.lastAssignedId)
          AddMoreImages.lastAssignedId = 100;
        newFile.setAttribute("id", "FileUpload" + AddMoreImages.lastAssignedId);
        newFile.setAttribute("name", "FileUpload" + AddMoreImages.lastAssignedId);
        if (AddMoreImages.lastAssignedId > 104) {
          alert("You can't add more than 6 images with a single puzzle");
          return false;
        }
        var div = document.createElement("div");
        div.appendChild(newFile);
        div.setAttribute("id", "div" + AddMoreImages.lastAssignedId);
        fileUploadarea.appendChild(div);
        AddMoreImages.lastAssignedId++;
      }

Now it allows 6 files ( one fixed and 5 dynamically added) maximum.

Insert the following code in code behind file of this page.

try
      {
        HttpFileCollection hfc = Request.Files;
          for (int i = 0; i < hfc.Count; i++)
          {
            HttpPostedFile hpf = hfc[i];
            if (hpf.ContentLength > 0)
            {
              hpf.SaveAs(Server.MapPath("~/uploads/") +System.IO.Path.GetFileName(hpf.FileName);
            }
          }
      }
      catch (Exception)
      {

        throw;
      }

Make sure you have created a folder named "uploads" at the root of your site and you have rights to write files there.

There are few other different way here :
http://www.dotnetcurry.com/ShowArticle.aspx?ID=68
http://www.dotnetfunda.com/articles/article981-multiple-files-upload-in-aspnet-and-aspnet-with-jquery.aspx

Gunasundari Loganathan replied to Somesh Yadav on 22-Feb-12 06:44 AM

Thank u