call fileUpload control using asp button

Question

I am creating an application that will show an image when I click a button and browse on the dialog.

this is my sample layout and code:

+---------------------------------------------------+
|                                                   |
|                                                   |
|                                                   |
|          CLICK HERE TO INSERT IMAGE               |
|                                                   |
|                                                   |
|                                                   |
+---------------------------------------------------+

<asp:Panel ID="Panel2" runat="server" cssClass="containment-wrapper" style="border:1px solid #000000;">
            <asp:FileUpload ID="FileUpload1" runat="server" style="display:none;"/>
            <asp:ImageButton ID="MainImage" runat="server" CssClass="mainImage" ImageUrl="~/Image/ClickHere.png" OnClick="MainImage_Click"/>
</asp:Panel>

and my .CS file

  protected void Page_Load(object sender, EventArgs e)
    {
        MainImage.Attributes.Add("onclick", "document.getElementById('" + FileUpload1.ClientID + "').click();");

    }
   protected void MainImage_Click(object sender, ImageClickEventArgs e)
    {

    }

I can click the "CLICK HERE TO INSERT IMAGE" and shows the file dialog, but my problem is how to get the selected image and show it on the buttonImage.

Do you mean - show the selected image on the ImageButton before it's uploaded to the server ? — sh1rts
– sh1rts, Commented Jan 13, 2014 at 5:14
Not really. Just after I click the "CLICK HERE TO INSERT IMAGE" browse the image, and show it on the ImageButton. — coderush
– coderush, Commented Jan 13, 2014 at 5:21

sh1rts · Accepted Answer · 2014-01-13 06:25:56Z

1

Then You need to use the FileUpload's PostedFile.SaveAs function to upload the image to a named folder of your website, and set the ImageURL property of the ImageButton as appropriate: -

FileUpload1.PostedFile.SaveAs(HttpContext.Current.Server.MapPath("~/upload/image.jpg"));

Make sure the user your app pool is running under has write permissions to this folder (upload in the example above)

Edit: -

If you don't want to save the image, your task is harder but could be solved by: -

Storing the PostedFile's InputStream to a Session variable
Create an HttpHandler that returns this stream
Point your ImageButton's ImageURL at the HttpHandler instead of an image URL

edited Jan 13, 2014 at 6:25

answered Jan 13, 2014 at 5:39

sh1rts

1,8841 gold badge13 silver badges14 bronze badges

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

1 Comment

coderush Over a year ago

What if I don't want to save on my folder just for preview purposes?

Collectives™ on Stack Overflow

call fileUpload control using asp button

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related