When trying to upload an Image, I push the button and the page refreshes and the image doesn't upload. What is going on?

Question

I have a webform that inherits the layout from a Site.Master file. Everytime I press the "Upload" Button, the page refreshes and nothing happens. I just want it to upload the image from the "FileUpload" Control. I have used this exact code on a page that does not inherit a layout from a Site.Master but I need this to work with a Site. Master. Any ideas?

Here's the ASP Part:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="SignUp.aspx.cs" Inherits="MTCO.SignUp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <asp:TextBox ID="firstNameBox" runat="server"></asp:TextBox>
    <br />
    <br />
    <asp:TextBox ID="lastNameBox" runat="server"></asp:TextBox>
    <br />
    <br />
    <asp:FileUpload ID="FileUpload1" runat="server" />
    <br />
    <br />
    <asp:Button ID="uploadButton" runat="server" Text="Upload" />
    <br />
    <br />
    <asp:TextBox ID="statusBox" runat="server">In Progress..</asp:TextBox>
    <br />
</asp:Content>

And Heres the C# Part:

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Drawing.Imaging;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

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

        }

        protected void uploadButton_Click(object sender, EventArgs e)
        {
            string filePath = Server.MapPath("~/images/testing/") + FileUpload1.FileName;
            Bitmap photoFile = ResizeImage(FileUpload1.PostedFile.InputStream, 200, 300);
            photoFile.Save(filePath, ImageFormat.Jpeg);
            statusBox.Text = "Uploaded Successfully";
        }

        public Bitmap ResizeImage(Stream stream, int? width, int? height)
        {
            System.Drawing.Bitmap bmpOut = null;
            const int defaultWidth = 800;
            const int defaultHeight = 600;
            int lnWidth = width == null ? defaultWidth : (int)width;
            int lnHeight = height == null ? defaultHeight : (int)height;
            try
            {
                Bitmap loBMP = new Bitmap(stream);
                ImageFormat loFormat = loBMP.RawFormat;

                decimal lnRatio;
                int lnNewWidth = 0;
                int lnNewHeight = 0;

                //*** If the image is smaller than a thumbnail just return it
                if (loBMP.Width < lnWidth && loBMP.Height < lnHeight)
                {
                    return loBMP;
                }

                if (loBMP.Width > loBMP.Height)
                {
                    lnRatio = (decimal)lnWidth / loBMP.Width;
                    lnNewWidth = lnWidth;
                    decimal lnTemp = loBMP.Height * lnRatio;
                    lnNewHeight = (int)lnTemp;
                }
                else
                {
                    lnRatio = (decimal)lnHeight / loBMP.Height;
                    lnNewHeight = lnHeight;
                    decimal lnTemp = loBMP.Width * lnRatio;
                    lnNewWidth = (int)lnTemp;
                }

                bmpOut = new Bitmap(lnNewWidth, lnNewHeight);
                Graphics g = Graphics.FromImage(bmpOut);
                g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
                g.FillRectangle(Brushes.White, 0, 0, lnNewWidth, lnNewHeight);
                g.DrawImage(loBMP, 0, 0, lnNewWidth, lnNewHeight);
                loBMP.Dispose();
            }
            catch
            {
                return null;
            }
            return bmpOut;
        }
    }
}

Please check this [link](http://stackoverflow.com/questions/11246742/how-to-upload-a-file-without-refreshing-page) — andy, Oct 10 '12 at 06:49

score 2 · Accepted Answer · answered Oct 10 '12 at 06:49

2

you need to attach the uploadButton_Click event to the OnClick event of the button like so:

<asp:Button ID="uploadButton" runat="server" Text="Upload" OnClick="uploadButton_Click" />

answered Oct 10 '12 at 06:49

Christian Hagelid

8,275
4
40
63

The page directive attribute AutoEventWireup="true" seems to already handle the button click (not a good practice, I admit). Maybe the problem lies in the master page. – jbl Oct 10 '12 at 08:32
@jbl the `AutoEventWireup` attribute has nothing to do with the button click event. – Christian Hagelid Oct 10 '12 at 08:57
@ChistianHagelid : yes, you're right, it only affects page events. thx for the answer. – jbl Oct 10 '12 at 09:35

score 0 · Answer 2 · answered Oct 10 '12 at 06:54

In VB.net you can use a method declaration like:

protected sub uploadButton_Click(object sender, EventArgs e) Handles uploadButton.Click

or the button markup declaration to define the behavior of a buttom:

<asp:Button ID="uploadButton" runat="server" Text="Upload" OnClick="uploadButton_Click" />

However, in C# you only can use the second way.

When trying to upload an Image, I push the button and the page refreshes and the image doesn't upload. What is going on?

2 Answers2