add dynamically fileupload control RSS

• • Reply
  

  praveen.k

  Member

  127 Points

  209 Posts

  add dynamically fileupload control

  Jun 15, 2010 08:49 AM|LINK

  Hi Everyone,
  

                 I have a requirement where i need to add fileupload controls dinamically when Add button is clicked.  In my form i have one Add button and one Save button.

  Each time ADD button is clicked one fileupload control must be added to form and i succeded in getting this.

  Here is the code

     static int i;
      FileUpload fuPic;
   
      protected void Page_Load(object sender, EventArgs e)
      {
          if (Session["pnl"] != null)
          {
              Panel pnlfinal = (Panel)Session["pnl"];
              pnlAddfu.Controls.Add(pnlfinal);
  
          }
         
      }

  protected void btnAdd_Click(object sender, EventArgs e)
      {
          if (i <= 4)
          {
              i = i + 1;
              Panel pnlfinal = new Panel();
              fuPic = new FileUpload();
              //fuPic.ID = fuPic + i.ToString();
              pnlfinal.Controls.Add(fuPic);
              pnlAddfu.Controls.Add(pnlfinal);
              Session["pnl"] = pnlAddfu;
          }
   
      }

  
  

  but i am not able to catch the dynamically added  fileupload control id in save button.

  I need to get the paths of fileupload controls in save button.
  

  Pls help me resolving this.

  Thanks
  

  
  

  
  

  Praveen
• • Reply
  

  chintanpshah

  All-Star

  19058 Points

  3273 Posts

  Re: add dynamically fileupload control

  Jun 15, 2010 10:37 AM|LINK

  You need to set following for <form> tag:
  
  enctype="multipart/form-data
  
  and iterate Request.Files[i] on server side to get list of files.
  
  Refer: http://www.aspsnippets.com/Articles/Uploading-Multiple-Files-using-JavaScript-Dynamic-FileUpload-Controls-in-ASP.Net.aspx
  

  
  

  Don't forget to mark as answer, if it helps
  
  My Software Website
• • Reply
  

  Charith Guna...

  Star

  14958 Points

  1854 Posts

  Re: add dynamically fileupload control

  Jun 15, 2010 01:54 PM|LINK

  Proplem is wtih asp.net file upload control is - for security purposes it does not support for ViewState. So if you have 2 file upload controls in the page and have two files selected, then if you click on add more you will add more file uploads to the list, but you will lose previously selected files due to lack of ViewState. Unfortunately I think in a senario like this, we might need to have fixed number of file uploads and once they have files selected, we have to save all the files in a one go.

  You may consider solutoin like this but there is no gurantee about performance
  

  PS: in your solution, I dont think it is a wise idea to save to whole panel in a session vairable. It may waste valuble server resources. But you can save file upload count instead in session or viewstate.

  Furthermore, you may consiser using external plugin like File Uploadify to ahive your goal. However to keep it simple I would have a fixed number of file upload fileds. I have implemented a simple asp.net control. If you like you can have a look. Source is avaiable for you to paly with
  

  
  

  Thanks
  Charith Gunasekara | FAQ
  • Marked as answer by Jerry Weng - MSFT on Jun 21, 2010 10:15 AM
• • Reply
  

  chintanpshah

  All-Star

  19058 Points

  3273 Posts

  Re: add dynamically fileupload control

  Jun 15, 2010 02:34 PM|LINK

  Another solution if you can use Flash. This solution allows users to upload multiple files without click add multiple times.

  Refer:

  http://www.aspsnippets.com/Articles/Select-and-Upload-Multiple-Files-Gmail-Style-using-JQuery-and-ASP.Net.aspx
  

  http://www.codeproject.com/KB/aspnet/FlashUpload.aspx
  

  Don't forget to mark as answer, if it helps
  
  My Software Website
  • Marked as answer by Jerry Weng - MSFT on Jun 21, 2010 10:15 AM
• • Reply
  

  ramiramilu

  All-Star

  95493 Points

  14106 Posts

  Re: add dynamically fileupload control

  Jun 15, 2010 04:26 PM|LINK

  Check out this Joe Stagner's sample code to upload multiple files with dynamic creatino of input:File controls....

  May be it is useful to you....
  

  <%@ Page Language="C#"%>
  <%@ Import Namespace="System.IO" %>
  
  
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
  
  <script runat="server">
      protected void Page_Load(object sender, EventArgs e)
      {
          String UpPath;
          UpPath = "E:\\UploadedUserFiles";
  
  
          if (!Directory.Exists(UpPath))
          {
              Directory.CreateDirectory("E:\\UploadedUserFiles\\");
          }
      }
      protected void btnSubmit_Click(object sender, EventArgs e)
      {
          HttpFileCollection uploads = HttpContext.Current.Request.Files;
          for (int i = 0; i < uploads.Count; i++)
          {
              HttpPostedFile upload = uploads[i];
  
  
              if (upload.ContentLength == 0)
                  continue;
  
  
              string c = System.IO.Path.GetFileName(upload.FileName); // We don't need the path, just the name.
  
  
              try
              {
                  upload.SaveAs("E:\\UploadedUserFiles\\" + c);
                  Span1.InnerHtml = "Upload(s) Successful.";
              }
              catch (Exception Exp)
              {
                  Span1.InnerHtml = "Upload(s) FAILED.";
              }
          }
      }
  </script>
  
  
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head id="Head1" runat="server">
      <title></title>
  </head>
  <body>
  <form id="form1" runat="server" enctype="multipart/form-data">
  <p id="upload-area">
     <input id="File1" type="file" runat="server" size="60" />
  </p>
  
  
  <input id="AddFile" type="button" value="Add file" onclick="addFileUploadBox()" />
  <p><asp:Button ID="btnSubmit" runat="server" Text="Upload Now" OnClick="btnSubmit_Click" /></p>
  <span id="Span1" runat="server" />
  
  
  <script type="text/javascript">
      function addFileUploadBox() {
          if (!document.getElementById || !document.createElement)
              return false;
  
  
          var uploadArea = document.getElementById("upload-area");
  
  
          if (!uploadArea)
              return;
  
  
          var newLine = document.createElement("br");
          uploadArea.appendChild(newLine);
  
  
          var newUploadBox = document.createElement("input");
  
  
          // Set up the new input for file uploads
          newUploadBox.type = "file";
          newUploadBox.size = "60";
  
  
          // The new box needs a name and an ID
          if (!addFileUploadBox.lastAssignedId)
              addFileUploadBox.lastAssignedId = 100;
  
  
          newUploadBox.setAttribute("id", "dynamic" + addFileUploadBox.lastAssignedId);
          newUploadBox.setAttribute("name", "dynamic:" + addFileUploadBox.lastAssignedId);
          uploadArea.appendChild(newUploadBox);
          addFileUploadBox.lastAssignedId++;
      }
  </script>
  </form>
  </body>
  </html>

  
  
  

  Website
  JumpStart
  • Marked as answer by Jerry Weng - MSFT on Jun 21, 2010 10:15 AM