Teo Lawrence
Teo Lawrence

Reputation: 37

ASPX : Error while using HTML Input type="file"

I'm creating a form with "Upload" control by HTML input type="file"

Here is my html code:

<form id="form1" runat="server" enctype="multipart/form-data">
    <div class="form-group">
        <asp:label ID="Label1" runat="server" For="message-text" class="col-form-label">Transaction Slip:</asp:label><br />
        <input type="file" name="FileUpload" class="btn btn-light" accept="image/*"/>
    </div>
</form>

And the .cs behind code like below:

protected void btnSubmit_Clicked(object sender, EventArgs e)
{
    HttpPostedFile postedFile = Request.Files["FileUpload"];
    string filePath = Server.MapPath("~/TransacSlip/") + Path.GetFileName(postedFile.FileName);
    postedFile.SaveAs(filePath);
}

But I was getting the error below:

Server Error in '/' Application. Object reference not set to an instance of an object.

Error Line:

Line 78: string filePath = Server.MapPath("~/TransacSlip/") + Path.GetFileName(postedFile.FileName);

Did anyone know how to solve this problem ? Many Thanks ~

Upvotes: 0

Views: 1740

Answers (3)

Teo Lawrence
Teo Lawrence

Reputation: 37

I'm post the full solution I used here for other people who need this function also.

Code in HTML/ASP.Net (Remember to put enctype="multipart/form-data")

<form id="form1" runat="server" enctype="multipart/form-data">
    <input type="file" name="FileUpload" class="btn btn-light" accept="image/*"/>
    <asp:Button ID="TestButton" runat="server" Text="Button" OnClick="TestButton_Clicked" />
</form>

Code Behind (c#)

using System.IO;

protected void TestButton_Clicked(object sender, EventArgs e)
{
    //To get the file from HTML Input File
    HttpPostedFile postedFile = Request.Files["FileUpload"];

    //String your relative folder path
    string folderPath = Server.MapPath("~/FolderName/");

    //Check if your folder is exist or not, if not then created folder automatically
    if (!Directory.Exists(folderPath))
    {
        Directory.CreateDirectory(folderPath);
    }

    //Check did your control have image uploaded
    if (postedFile != null && postedFile.ContentLength > 0)
    {
        //To prevent duplicated name (accidently replace), using GUID code to store your image
        string GUIDCode = System.Guid.NewGuid().ToString("N");
        string filePath = folderPath + GUIDCode + ".jpg";
        postedFile.SaveAs(filePath);
    }
    else if (postedFile == null && postedFile.ContentLength <= 0)
    {
        // Do your thing when control have no image uploaded
    }
}

Upvotes: 1

Rakesh Dhamejani
Rakesh Dhamejani

Reputation: 109

Please try this code

//Access the File using the Name of HTML INPUT File.
HttpPostedFile postedFile = Request.Files["FileUpload"];

//Check if File is available.
if (postedFile != null && postedFile.ContentLength > 0)
{
   //Save the File.
   string filePath = Server.MapPath("~/TransacSlip/") + Path.GetFileName(postedFile.FileName);
   postedFile.SaveAs(filePath);
   lblMessage.Visible = true;
}

Upvotes: 0

Sunil
Sunil

Reputation: 21406

Add runat="server" to the html input of type file control as in code below, then you will have a posted file in code-behind else Request.Files collection is going to be empty in code-behind.

<input type="file" name="FileUpload" class="btn btn-light" accept="image/*" runat="server"/>

Right now since no Files are getting posted, so postedFile variable is null and therefore, when you invoke a method or access a property on this variable it will throw a null reference exception. In your case postedFile.FileName will cause this exception in your code-behind.

Alternate Solution:

If you wanted to not use runat="server" attribute for input control of file type, then make sure your form in the page has the enctype attribute set to multipart/form-data as in code below. This will also solve your problem. You don't need to add runat="server" attribute if you follow this approach.

<form id="form1" runat="server" enctype="multipart/form-data">

Upvotes: 1

Related Questions