locked
Image upload disappear on button click RRS feed

  • Question

  • User-1994446809 posted

    My uploaded image disappears from the <asp:Image/> container when i click a button that will generate QR code. I really don't know why I get this unwanted action on my web form. I have checked the button click event and i have not added any function that will make an image invisible in the image container. My code used is attached with this thread

    Default.aspx:

    <div class="container-fluid" style="margin:0 auto">
                <asp:FileUpload ID="FileUpload1" runat="server" Height="43px" Width="282px" onchange="ImagePreview(this);" />
                <div class="row>">
                    <asp:Image ID="Image3" runat="server" Width="390px" Height="450" />
                    <asp:Image ID="Image4" runat="server" BorderStyle="None" Width="100" Height="100" />
                &nbsp;<asp:Button ID="finish" runat="server" Height="33px" OnClick="finish_Click" Text="Button" Width="124px" />
                </div>
                <asp:Button ID="Button1" runat="server" BackColor="#009933" CssClass="btn btn-success" Text="Generate QR Code" Width="190px" Height="40px" OnClick="Button1_Click" />
            </div>

    Default.aspx.cs:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using MessagingToolkit.QRCode.Codec.Data;
    using MessagingToolkit.QRCode.Codec;
    using System.Drawing;
    using System.Drawing.Imaging;
    
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
           
        }
    
        protected void Button1_Click(object sender, EventArgs e)
        {
            QRCodeEncoder encoder = new QRCodeEncoder();
            Bitmap bi = encoder.Encode("https://mysite.com/Default.aspx");
            bi.Save(Server.MapPath("~/images/newqr.jpg"), ImageFormat.Jpeg);
            Image4.ImageUrl = "~/images/newqr.jpg";
        }
    }

    Also, does it mean that the QR code generated will be saved in the images folder as "newqr.jpg", as shown in the yellow highlighted area? I ask this because I have a file named newqr.jpg in the images folder and I dont want a situation where all my QR code will read the newqr.jpg image file only instead of reading the page where it was assigned to. 

    I will be grateful if I get more light on this. thank you

    George A.

    Monday, May 11, 2020 9:38 PM

Answers

  • User1535942433 posted

    Hi georgeakpan233,

    Accroding to your description,I'm guessing that you have preview image using jquery and after you generate the QR code,the preview image will disappear.As far as I think,the page will refresh after clicking.So,you need to reload the preview image.I suggest you could add a hiddenfield and put the preview image src to hiddenfield value.After generating the QR code,the image control rebind the image.

    More details,you could refer to below codes:

    <head runat="server">
        <title></title>
        <link href="Content/bootstrap.css" rel="stylesheet" />
        <script src="Scripts/jquery-3.2.1.min.js"></script>
        <script type="text/javascript">
            function ImagePreview(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        $('#<%=Image3.ClientID%>').prop('src', e.target.result)
                         $("#HiddenField1").val($('#<%=Image3.ClientID%>').attr('src'));
                    };
                    reader.readAsDataURL(input.files[0]);
                }
            }
        </script>
        <script>
            $(function () {
               var data = $("#Image4").attr('src');
                if ($("#Image4").attr('src') != "") {
                    $('#<%=Image3.ClientID%>').prop('src', $("#HiddenField1").val());
                }
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <div class="container-fluid" style="margin: 0 auto">
    
                    <asp:FileUpload ID="FileUpload1" runat="server" Height="43px" Width="282px" onchange="ImagePreview(this);" />
                    <div class="row">
                        <asp:Image ID="Image3" runat="server" Width="390px" Height="450" />
                        <asp:Image ID="Image4" runat="server" BorderStyle="None" Width="100" Height="100" />
                        &nbsp;<asp:Button ID="Button2" runat="server" Height="33px" Text="Button" Width="124px" />
                    </div>
                    <asp:Button ID="Button1" runat="server" BackColor="#009933" CssClass="btn btn-success" Text="Generate QR Code" Width="190px" Height="40px" OnClick="Button1_Click1" />
                    <asp:HiddenField ID="HiddenField1" runat="server" />
                </div>
            </div>
        </form>
    </body>

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, May 14, 2020 3:10 AM

All replies

  • User475983607 posted

    There are two image controls; Image3 and Image4.  Which image control disappears?  There are also two buttons and we can only see the event for Button1_Click which sets Image4's image source.

    Also, does it mean that the QR code generated will be saved in the images folder as "newqr.jpg", as shown in the yellow highlighted area?

    That's what the code is trying to do.

    I ask this because I have a file named newqr.jpg in the images folder and I dont want a situation where all my QR code will read the newqr.jpg image file only instead of reading the page where it was assigned to. 

    I will be grateful if I get more light on this. thank you

    Can you explain how your code is supposed to work?

    Monday, May 11, 2020 10:01 PM
  • User-1994446809 posted

    mgebhard

    There are two image controls; Image3 and Image4.  Which image control disappears?  There are also two buttons and we can only see the event for Button1_Click which sets Image4's image source.

    Image3 control disappears. The button with an event (Button1_Click) is to generate a QR code, while the other button is to transfer and bind data (both in Image3 and Image4 controls) from the current page to the next page for display. But since Image3 disappears on the click of the generate QR button (i.e Button1), I did not write a code for image3 to be transfered and also display on the next form.

    mgebhard

    Can you explain how your code is supposed to work?

    Code is supposed to save different QR separately with diferent name file and not with "newqr.jpg", so that when scanning the QR it will not have the same result.

    Monday, May 11, 2020 10:21 PM
  • User1535942433 posted

    Hi georgeakpan233,

    Accroding to your description,I'm guessing that you have preview image using jquery and after you generate the QR code,the preview image will disappear.As far as I think,the page will refresh after clicking.So,you need to reload the preview image.I suggest you could add a hiddenfield and put the preview image src to hiddenfield value.After generating the QR code,the image control rebind the image.

    More details,you could refer to below codes:

    <head runat="server">
        <title></title>
        <link href="Content/bootstrap.css" rel="stylesheet" />
        <script src="Scripts/jquery-3.2.1.min.js"></script>
        <script type="text/javascript">
            function ImagePreview(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        $('#<%=Image3.ClientID%>').prop('src', e.target.result)
                         $("#HiddenField1").val($('#<%=Image3.ClientID%>').attr('src'));
                    };
                    reader.readAsDataURL(input.files[0]);
                }
            }
        </script>
        <script>
            $(function () {
               var data = $("#Image4").attr('src');
                if ($("#Image4").attr('src') != "") {
                    $('#<%=Image3.ClientID%>').prop('src', $("#HiddenField1").val());
                }
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <div class="container-fluid" style="margin: 0 auto">
    
                    <asp:FileUpload ID="FileUpload1" runat="server" Height="43px" Width="282px" onchange="ImagePreview(this);" />
                    <div class="row">
                        <asp:Image ID="Image3" runat="server" Width="390px" Height="450" />
                        <asp:Image ID="Image4" runat="server" BorderStyle="None" Width="100" Height="100" />
                        &nbsp;<asp:Button ID="Button2" runat="server" Height="33px" Text="Button" Width="124px" />
                    </div>
                    <asp:Button ID="Button1" runat="server" BackColor="#009933" CssClass="btn btn-success" Text="Generate QR Code" Width="190px" Height="40px" OnClick="Button1_Click1" />
                    <asp:HiddenField ID="HiddenField1" runat="server" />
                </div>
            </div>
        </form>
    </body>

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, May 14, 2020 3:10 AM