Asp.net Multiple File Uploads

Question

I have an ASP.net web application which saves all details entered in the session and at the end, sends an email with all the details including an attachment of the file uploaded (all this currently works fine).

The issue I have is that a change is required to the file upload page. I want to now be able to upload multiple docs, but separately, so basically the user finds the file to upload then clicks an 'Add' button. The upload file field should then clear and a table should populate with the uploaded file(s) with a 'Remove/Delete' button for each file uploaded.

The details that should be displayed in this table are:

File name
Option selected form the new dropdown list
Remove button

As I said I have single file upload working using the code behind but I have no idea how to implement what I'm after so that all uploaded doc's are sent in my email.

Current HTML

<div class="form-group">
     <div class="col-sm-offset-2 col-sm-5">
          <div class="fileinput fileinput-new input-group" data-provides="fileinput">
               <div class="form-control" data-trigger="fileinput" style="background-color: #ededed">
                    <span class="fileinput-filename"></span>
               </div>
               <span class="input-group-addon btn btn-default btn-file">
                    <span class="fileinput-new">
                         <span class="glyphicon glyphicon-folder-open" title="Click to select a file."></span>
                    </span>
                    <span class="fileinput-exists">
                         <span class="glyphicon glyphicon-folder-open" title="Click to change the selected file."></span>
                    </span>
                    <input type="file" name="..." id="fuAttachment" runat="server" />
               </span>
          </div>
     </div>
     <div class="col-sm-3">
          <asp:DropDownList ID="Step03WebTypeDD" runat="server" class="form-control">
               <asp:ListItem Value="- - Please select - -">- - Please select - -</asp:ListItem>
               <asp:ListItem Value="Requirements">Requirements</asp:ListItem>
               <asp:ListItem Value="Functional specification">Functional specification</asp:ListItem>
               <asp:ListItem Value="Page Content">Page Content</asp:ListItem>
               <asp:ListItem Value="Page Designs">Page Designs</asp:ListItem>
               <asp:ListItem Value="Page Designs">Other</asp:ListItem>
          </asp:DropDownList>
     </div>
     <div class="col-sm-1">                                    
          <asp:LinkButton ID="UploadAddButton" runat="server" OnClick="Step05UploadAddButton_Click" CssClass="btn btn-success pull-right" ToolTip="Click to upload the file.">
               <span class="glyphicon glyphicon-plus"></span> Add
          </asp:LinkButton>
     </div>
</div>

Current Code Behind

protected void Step05UploadAddButton_Click(object sender, EventArgs e)
{
     var file = fuAttachment.PostedFile;
     if (file != null && fuAttachment.PostedFile.FileName != "")
     {
          var content = new byte[file.ContentLength];
          file.InputStream.Read(content, 0, content.Length);
          Session["FileContent"] = content;
          Session["FileContentType"] = file.ContentType;
          Session["File"] = fuAttachment.PostedFile.FileName;
          Session["AttachmentProvided"] = "Yes";
     }
     else
     {
          Session["FileContent"] = "";
          Session["FileContentType"] = "";
          Session["File"] = "";
          Session["AttachmentProvided"] = "No";
     }
}

My code behind does not capture the option selected but will need to so I can display it on my confirmation page (HTML shown below)

<div class="form-group">
        <asp:Label ID="Label6" class="col-xs-6 col-sm-3 control-label" runat="server" Text="Attachment provided:"></asp:Label>
        <div class="col-xs-6 col-sm-9 form-control-static">
            <% if (Session["AttachmentProvided"] == "Yes")
            {%>
                Yes (<%=Session["File"] %>)
            <%}
            else
            { %>
                No
            <%} %>
        </div>
    </div>

Brian Mains · Accepted Answer · 2016-03-29 11:09:46Z

1

You can use JavaScript to add additional <input type="file" /> elements to the DOM, and generically refer to all of the files using Request.Files as mentioned on MSDN. A sample taken from MSDN:

Files = Request.Files; // Load File collection into HttpFileCollection variable.
arr1 = Files.AllKeys;  // This will get names of all files into a string array.
for (loop1 = 0; loop1 < arr1.Length; loop1++) 
{
    Response.Write("File: " + Server.HtmlEncode(arr1[loop1]) + "<br />");
    Response.Write("  size = " + Files[loop1].ContentLength + "<br />");
    Response.Write("  content type = " + Files[loop1].ContentType + "<br />");
}

answered Mar 29, 2016 at 11:09

Brian Mains

50.8k35 gold badges155 silver badges260 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Asp.net Multiple File Uploads

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related