Upload file control not showing any file in the code behind

Viewed 449

I have a very simple application. I am trying to upload the file using File upload control of ASP.net. Below is my entire .cs code and .aspx code:

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

namespace TestFileUpload1
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void uploadFile_Click(object sender, EventArgs e)
        {

            if (UploadImages.HasFiles)
            {
                foreach (HttpPostedFile uploadedFile in UploadImages.PostedFiles)
                {
                    uploadedFile.SaveAs(System.IO.Path.Combine(Server.MapPath("~/Images/"), uploadedFile.FileName));
                    //listofuploadedfiles.Text += String.Format("{0}<br />", uploadedFile.FileName);
                }
            }
        }
    }
}

My .aspx code:

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Test web site</title>
       <script src="Scripts/jquery-1.11.0.js"></script>

  <script src="Scripts/jquery.mobile-1.4.5.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
              <div>
             <asp:FileUpload runat="server" ID="UploadImages" AllowMultiple="true" />  
            <asp:Button runat="server" ID="uploadedFile" Text="Upload" OnClick="uploadFile_Click" />  
             <asp:Label ID="listofuploadedfiles" runat="server" />  
        </div>
        </div>
    </form>
</body>
</html>

whenever I try to upload a file, I get "False" for UploadImages.HasFiles. Above is full working example. As soon as I remove one of these script tags :

 <script src="Scripts/jquery-1.11.0.js"></script>

  <script src="Scripts/jquery.mobile-1.4.5.js"></script>

my code starts working and I get "true" for UploadImages.HasFiles when I try to upload a file.

I am using .net framework 4.7.2

I need to keep these two script tags in my code because of the GUI and this is an old application where these tags are used in all the pages.

I also tried to wrap the control in a update panel and that didn't work either. below is the changed .aspx page. although, I want my original code to work. I don't want to use ajax, but I just tried to use it because it is suggested as one of the solution

  <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TestFileUpload1.WebForm1" %>
<%--<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"  TagPrefix="asp"%>--%>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Test web site</title>
       <script src="Scripts/jquery-1.11.0.js"></script>

  <script src="Scripts/jquery.mobile-1.4.5.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div>
              <div>
                  <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                        <ContentTemplate>
                            <asp:FileUpload runat="server" ID="UploadImages" AllowMultiple="true" />
                        </ContentTemplate>
                       <Triggers>
                           <asp:PostBackTrigger ControlID="uploadedFile" />
                        </Triggers>
                      
                      </asp:UpdatePanel>
              <asp:Button runat="server" ID="uploadedFile" Text="Upload" OnClick="uploadFile_Click" />
             <asp:Label ID="listofuploadedfiles" runat="server" />  
                      
        </div>
        </div>
    </form>
</body>
</html>

below is the image of false value that I am getting in code behind:

enter image description here

Any help will be highly appreciated.

3 Answers

All I had to do is put data-ajax ="false" in form tag and that fixed the issue.

  <form id="form1" runat="server" data-ajax ="false">

Use a update panel and wrap your controls inside it. Then add the button controlID as a trigger (be sure its a PostBackTrigger) to the update panel. To test be sure to put a break point on the uploadFile_Click event so you can step through and see the values..

                 <asp:UpdatePanel ID="UpdatePanel1" runat="server"     UpdateMode="Conditional">
  <Triggers>
<asp:PostBackTrigger ControlID="btnSignaureOfRequestor" />
</Triggers>
   <ContentTemplate>
       <table>
            <tr>  <td class="tdText" colspan="4">
           <asp:FileUpload ID="fileUpload" runat="server" Width="50%" />
                    </td>
                            </tr>
<tr>
    <td> <asp:Button ID="btnSignaureOfRequestor" runat="server"  Text="Submit Request" Visible="true" OnClientClick="return confirm('Are  you sure you want to continue?');" OnClick="btnSignaureOfRequestor_Click" />
                               </td>
   </tr>                                  
                     </table>
            </ContentTemplate>
            </asp:UpdatePanel>

Try the below, removed allow multiple and add update mode conditional (see confirm case/syntax of these changes as I'm just writing it in notepad)

 <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <div>
          <div>
              <asp:UpdatePanel ID="UpdatePanel1" runat="server" updateMode="Conditional">
                    <ContentTemplate>
                        <asp:FileUpload runat="server" ID="UploadImages" />&nbsp;
     <asp:Button runat="server" ID="uploadedFile" Text="Upload" OnClick="uploadFile_Click" />
                    </ContentTemplate>
                   <Triggers>
                       <asp:PostBackTrigger ControlID="uploadedFile" />
                    </Triggers>                   
                  </asp:UpdatePanel>
 
         <asp:Label ID="listofuploadedfiles" runat="server" />  
                  
    </div>
    </div>
Related