Image control not refreshing

Question

User1510859543 posted

We have a web forms app asp.net page (see markup and code below) with an image control to display a .png file in the customers folder (network file system).  If the .png file is updated the latest image is not displayed but the old image is displayed.  This happens for sometimes several reloads of the page.  I have a feeling it may be a caching issue but I want it to refresh "every" time the page displays.

    <script type="text/javascript">
        var panel;
        function signatureCapture() {
            var canvas = document.getElementById("SigCnv");
            var context = canvas.getContext("2d");
            //canvas.width = 360;
            canvas.width = window.innerWidth;
            canvas.height = 84;
            context.fillStyle = "#fff";
            context.strokeStyle = "#444";
            context.lineWidth = 1.5;
            context.lineCap = "round";
            context.fillRect(0, 0, canvas.width, canvas.height);
            var disableSave = true;
            var pixels = [];
            var cpixels = [];
            var xyLast = {};
            var xyAddLast = {};
            var calculate = false;
            {   //functions
            function remove_event_listeners() {
                canvas.removeEventListener('mousemove', on_mousemove, false);
                canvas.removeEventListener('mouseup', on_mouseup, false);
                canvas.removeEventListener('touchmove', on_mousemove, false);
                canvas.removeEventListener('touchend', on_mouseup, false);

                document.body.removeEventListener('mouseup', on_mouseup, false);
                document.body.removeEventListener('touchend', on_mouseup, false);
            }

            function get_coords(e) {
                var x, y;

                if (e.changedTouches && e.changedTouches[0]) {
                var offsety = canvas.offsetTop || 0;
                var offsetx = canvas.offsetLeft || 0;

                x = e.changedTouches[0].pageX - offsetx;
                y = e.changedTouches[0].pageY - offsety;
                } else if (e.layerX || 0 == e.layerX) {
                x = e.layerX;
                y = e.layerY;
                } else if (e.offsetX || 0 == e.offsetX) {
                x = e.offsetX;
                y = e.offsetY;
                }

                return {
                x : x, y : y
                };
            };

            function on_mousedown(e) {
                e.preventDefault();
                e.stopPropagation();

                canvas.addEventListener('mouseup', on_mouseup, false);
                canvas.addEventListener('mousemove', on_mousemove, false);
                canvas.addEventListener('touchend', on_mouseup, false);
                canvas.addEventListener('touchmove', on_mousemove, false);
                document.body.addEventListener('mouseup', on_mouseup, false);
                document.body.addEventListener('touchend', on_mouseup, false);

                empty = false;
                var xy = get_coords(e);
                context.beginPath();
                pixels.push('moveStart');
                context.moveTo(xy.x, xy.y);
                pixels.push(xy.x, xy.y);
                xyLast = xy;
            };

            function on_mousemove(e, finish) {
                e.preventDefault();
                e.stopPropagation();

                var xy = get_coords(e);
                var xyAdd = {
                x : (xyLast.x + xy.x) / 2,
                y : (xyLast.y + xy.y) / 2
                };

                if (calculate) {
                var xLast = (xyAddLast.x + xyLast.x + xyAdd.x) / 3;
                var yLast = (xyAddLast.y + xyLast.y + xyAdd.y) / 3;
                pixels.push(xLast, yLast);
                } else {
                calculate = true;
                }

                context.quadraticCurveTo(xyLast.x, xyLast.y, xyAdd.x, xyAdd.y);
                pixels.push(xyAdd.x, xyAdd.y);
                context.stroke();
                context.beginPath();
                context.moveTo(xyAdd.x, xyAdd.y);
                xyAddLast = xyAdd;
                xyLast = xy;

            };

            function on_mouseup(e) {
                remove_event_listeners();
                disableSave = false;
                context.stroke();
                pixels.push('e');
                calculate = false;
            };
            }
            canvas.addEventListener('touchstart', on_mousedown, false);
            canvas.addEventListener('mousedown', on_mousedown, false);
        }

        function signatureSave() {
            var canvas = document.getElementById("newSignature");  // save canvas image as data url (png format by default)
            var dataURL = canvas.toDataURL("image/png");
            document.getElementById("saveSignature").src = dataURL;
        };

        function signatureClear() {
            var canvas = document.getElementById("SigCnv");
            var context = canvas.getContext("2d");
            context.clearRect(0, 0, canvas.width, canvas.height);
            return false;
        }
        function signatureAction() {
            //alert('signatureAction function');
            var radioButtons = document.getElementsByName("ctl00$MainContent$RblSignatureAction");
            for (var x = 0; x < radioButtons.length; x++) {
                if (radioButtons[x].checked && radioButtons[x].value == 0) {
                    //Use existing signature image
                    document.getElementById('PanelUpload').className = 'hide';
                    document.getElementById('PanelSignature').className = 'hide';
                }
                if (radioButtons[x].checked && radioButtons[x].value == 1) {
                    //Enter new signature image
                    panel = document.getElementById('PanelSignature')
                    panel.className = 'show';
                    document.getElementById('PanelUpload').className = 'hide';
                }
                if (radioButtons[x].checked && radioButtons[x].value == 2) {
                    //Upload a signature
                    document.getElementById('PanelUpload').className = 'show';
                    document.getElementById('PanelSignature').className = 'hide';
                }
            }
        }
        function showUpload() {
            document.getElementById('BtnUploadFile').className = 'show';
            panel = document.getElementById('PanelSignature')
            panel.className = 'hide';
        }
        function showPay() {
            panel = document.getElementById('PanelPayments');
            panel.className = 'hide';
        }
    </script>

    <script type="text/javascript">
        // Send the canvas image to the server.

        $(function () {
            $("#BtnSaveSignature").click(function () {
                var vpath = document.getElementById('txtPhotoPath').value;
                var image = document.getElementById("SigCnv").toDataURL("image/png");
                image = image.replace('data:image/png;base64,', '');
                $.ajax({
                    type: 'POST',
                    url: 'SaveSignature.aspx/SaveImage',
                    data: JSON.stringify({ 
                         imageData : image,
                         strSavePath: vpath
                       }),
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                    success: function (msg) {
                        alert('Signature image saved successfully !')
                    },
                    error: function (msg) {
                        alert('save signature failed')
                    }
                });
                panel = document.getElementById('PanelSignature');
                panel.className = 'hide';
                panel = document.getElementById('PanelDocs');
                panel.className = 'show';

                //refresh page to get new signature
                __doPostBack('','');
            });
        });
    </script>
    <hr style="border-color: #000000; width: 98%;" />
    <asp:Panel ID="PanelSignatureOnFile" runat="server" CssClass="" ClientIDMode="Static">
        <asp:Label ID="LblSignatureOnFile" runat="server" Text=""></asp:Label>
        <asp:Image ID="saveSignature" runat="server" ClientIDMode="Static" />
        <br />
        <asp:RadioButtonList ID="RblSignatureAction" runat="server"
            RepeatDirection="Horizontal" CellSpacing="5" CellPadding="5" 
            BorderWidth="1px" BorderStyle="Solid" onclick="signatureAction();" ClientIDMode="Static">
            <asp:ListItem Value="0" Text="Use Above"></asp:ListItem>
            <asp:ListItem Value="1" Text="Enter New"></asp:ListItem>
            <asp:ListItem Value="2" Text="Upload New"></asp:ListItem>
        </asp:RadioButtonList>
    </asp:Panel>

    <p>&nbsp;</p>

    <asp:Panel ID="PanelUpload" runat="server" CssClass="hide" ClientIDMode="Static">
        <asp:FileUpload ID="FileUpload1" runat="server" ToolTip="Browse for file" onchange="showUpload();" />
        <asp:Button ID="BtnUploadFile" runat="server" Text="Click to Upload selected file" CssClass="hide" ClientIDMode="Static" ForeColor="#009900" />
    </asp:Panel>

    <asp:Panel ID="PanelSignature" runat="server" CssClass="hide" ClientIDMode="Static">
        <div id="canvas">
          <canvas class="" id="SigCnv"
            style="; margin: 0; padding: 0; border: 1px solid #c4caac;">
          </canvas>
        </div>
        <script type="text/javascript">
            signatureCapture();
        </script>
        <asp:Button ID="BtnSaveSignature" runat="server" Text="Save signature" UseSubmitBehavior="False" ClientIDMode="Static" />
        <asp:Button ID="BtnClearSignature" runat="server" Text="Clear signature" OnClientClick="return signatureClear();" />
    </asp:Panel>

    <asp:Panel ID="PanelDocs" runat="server" CssClass="hide" ClientIDMode="Static">
        <p>&nbsp;</p>
        <asp:Button ID="BtnPrintDocs" runat="server" Text="Print Final Bill Documents" 
            ClientIDMode="Static" PostBackUrl="~/Repairs/FinalBillReports.aspx" OnClientClick="showPay();" />
    </asp:Panel>

    <asp:Panel ID="PanelPayments" runat="server" CssClass="" ClientIDMode="Static">
        <asp:Button ID="BtnPayment" runat="server" Text="3. Enter Payment" PostBackUrl="~/Repairs/Payment.aspx" />
    </asp:Panel>

The code-behind page is below:

    Private Sub Repairs_FinalBill_Load(sender As Object, e As EventArgs) Handles Me.Load
        If Request.Cookies("rid") Is Nothing Then
            'no RecordID in cookie so send back to customer login
            Response.Redirect("~/Default.aspx")
            Exit Sub
        End If

        Dim strRONumber As String = ""
        Dim strid As String = Request.Cookies("rid").Value
        Dim bolROfound As Boolean = False
        'Get Customer and Repair information for this job
        Dim strSQL As String = "EXEC ms_selRepairOrderOne @RecordID=" & strid
        BtnPrintDocs.PostBackUrl = "~/Repairs/FinalBillReports.aspx?rid=" & strid

        Using conData As SqlConnection = New SqlConnection(DBClass.GetMgmtConnectionString)
            conData.Open()

            Dim cmdSelect As SqlCommand = New SqlCommand(strSQL, conData)
            Dim dtr As SqlDataReader = cmdSelect.ExecuteReader()
            If dtr.HasRows Then
                bolROfound = True
                While dtr.Read()
                    Dim lbl As Label = Page.Master.FindControl("LblOwner")
                    lbl.Text = dtr("Customer")
                    If Not IsDBNull(dtr("Vehicle")) Then
                        lbl = Page.Master.FindControl("LblVehicle")
                        lbl.Text = dtr("Vehicle")
                        If Request.Cookies("vehicle") Is Nothing Then
                            Response.Cookies("vehicle").Value = dtr("Vehicle")
                        Else
                            If Request.Cookies("vehicle").Value <> dtr("Vehicle") Then
                                Response.Cookies("vehicle").Value = dtr("Vehicle")
                            End If
                        End If
                    End If
                    strRONumber = dtr("RepairOrderID").ToString
                    txtRONumber.Text = strRONumber
                    txtRecordID.Text = dtr("RecordID").ToString
                    If Request.Cookies("customer") Is Nothing Then
                        Response.Cookies("customer").Value = dtr("Customer")
                    Else
                        If Request.Cookies("customer").Value <> dtr("Customer") Then
                            Response.Cookies("customer").Value = dtr("Customer")
                        End If
                    End If

                    If Not IsDBNull(dtr("OriginalTargetDate")) Then
                        lbl = Page.Master.FindControl("LblTDD")
                        If Convert.ToBoolean(dtr("TDDWeekOf")) = False Then
                            lbl.Text = dtr("OriginalTargetDate")
                        Else
                            lbl.Text = "Week Of " & Format(dtr("OriginalTargetDate"), "M/d/yyyy")
                            Dim ck As CheckBox = Page.Master.FindControl("ckTDDWeekOf")
                            ck.Checked = True
                        End If
                        If Request.Cookies("tdd") Is Nothing Then
                            Response.Cookies("tdd").Value = Format(dtr("OriginalTargetDate"), "M/d/yyyy")
                        Else
                            If Request.Cookies("tdd").Value <> dtr("OriginalTargetDate") Then
                                Response.Cookies("tdd").Value = Format(dtr("OriginalTargetDate"), "M/d/yyyy")
                            End If
                        End If
                    End If

                    Dim lbtn As LinkButton = Page.Master.FindControl("LBtnMnu3")
                    txtInsuranceID.Text = dtr("InsuranceID").ToString
                    If dtr("InsuranceID") = 0 Then
                        lbtn.Visible = False
                    End If

                    If Not IsDBNull(dtr("FolderName")) Then
                        txtFolderName.Text = dtr("FolderName").ToString
                        PanelSignatureOnFile.CssClass = "show"
                        LblSignatureOnFile.Text = "Signature On File"
                        Dim strVPath As String = UtilClass.GetPhotosPath(strid, True, True)
                        Dim strPath As String = Server.MapPath("~/Photos/" & dtr("FolderName").ToString & "/") & "Signature.png"
                        txtPhotoPath.Text = strPath
                        If File.Exists(strPath) Then
                            saveSignature.ImageUrl = strVPath & "/Signature.png"
                            txtPhotoPathV.Text = Replace(strVPath, "~", "..") & "/Signature.png"
                            RblSignatureAction.Items(0).Enabled = True
                            RblSignatureAction.Items(0).Selected = True
                            PanelDocs.CssClass = "show"
                        Else
                            RblSignatureAction.Items(0).Enabled = False
                        End If
                    Else
                        txtPhotoPath.Text = UtilClass.GetPhotosPath(strid)
                    End If

                    Exit While
                End While
            End If
            dtr.Close()

            conData.Dispose()
        End Using

        If saveSignature.ImageUrl <> "" Then
            RblSignatureAction.Items(0).Selected = True
        End If

    End Sub

    Private Sub BtnUploadFile_Click(sender As Object, e As EventArgs) Handles BtnUploadFile.Click
        If FileUpload1.HasFile Then
            Dim reg As Regex = New Regex("(?i).*\.(gif|jpe?g|png|tif)$")
            Dim strFile As String = FileUpload1.FileName
            Dim tx As TextBox = Page.Master.FindControl("txtMsg")

            If reg.IsMatch(strFile) Then
                Dim SavePath As String = txtPhotoPath.Text
                Dim bmp As Bitmap = CType(Bitmap.FromStream(FileUpload1.PostedFile.InputStream), Bitmap)
                bmp.Save(SavePath, ImageFormat.Png)
                tx.Text = "Signature uploaded"
                PanelSignatureOnFile.CssClass = "show"
                saveSignature.ImageUrl = UtilClass.GetPhotosPath(txtRecordID.Text, True, True) & "/Signature.png"
                RblSignatureAction.Items(0).Enabled = True
                RblSignatureAction.Items(2).Selected = False
                RblSignatureAction.Items(0).Selected = True
                PanelDocs.CssClass = "show"
            Else
                tx.Text = "Upload failed. Invalid file type selected. Only allowed are gif, jpg, jpeg, png and tif."
            End If
        End If

    End Sub

Answer 1

User-943250815 posted

A way to force browser load a fresh image can be using a dynamic parameter with image source.
If I get correct line you can set ImageURL as

saveSignature.ImageUrl = strVPath & "/Signature.png?q=" & now.ToString("HHmmss")

Answer 2

User-1330468790 posted

Hi dlchase,

 

I can see that you always assign the .png with the same name which would make the browser using the cache.

Adding unique identifier for the image would be the simplest way to force the browser reload the image, e.g. timestamp, guid. 

There are some other solutions you might be interested in: 

Refresh image with a new one at the same url

  

Hope this can help you.

Best regards,

Sean