Welcome Guest Search | Active Topics | Sign In | Register

AjaxUploader does not work when untill all images on page are loaded Options
Ðonny
Posted: Wednesday, August 28, 2013 10:12:17 AM
Rank: Newbie
Groups: Member

Joined: 12/14/2009
Posts: 7
We have this problem recently that it took one of our server generating images long to respond and it broke all uploaders on our sites :-(-
Basically when you have an <img> in a page and the @src of image takes long to respond the uploader fails when user is uploading data before the image is loaded.
I'll post a sample application...
The error is (in chrome) Uncaught TypeError: Cannot set property 'innerHTML' of null on line in following code:

Code: JavaScript
EO1116.f.abry = function(a) {
    if (a == EO1116.g.au) {
        var b = new EO1116.f.aeg("upload");
        b.abv(this.aae, new EO1116.f.aeg(this.ablx));
        b.abv("s", new EO1116.f.aeg(this.ablo));
        if (EO1116.g.aqk) {
            var c = EO1116.f.abrj();
            EO1116.f.abri(c);
        }
        EO1116.g.aqj.innerHTML = "";
        for (var d = 0; d < this.abnf.length; d++) {


with following callstack :

EO1116.f.abry (eo_web.ashx?id=718163b7-1922-4fdb-b592-4f9b83b1b602:639)
EO1116.f.akq (eo_web.ashx?id=cbedb62c-ca76-4377-998e-d684de361783:738)
(anonymous function) (eo_web.ashx?id=cbedb62c-ca76-4377-998e-d684de361783:724)
Ðonny
Posted: Wednesday, August 28, 2013 10:21:10 AM
Rank: Newbie
Groups: Member

Joined: 12/14/2009
Posts: 7
Here is how to replicate it:
Let's have following ASP.NET 4.5 WebForms VB project:

web.config:
Code: XML

<configuration>
    <system.web>
        <compilation debug="true" strict="false" explicit="true" targetFramework="4.5" >
            <assemblies>
                <add assembly="EO.Web"/>
            </assemblies>
        </compilation>
        <httpRuntime targetFramework="4.5"  />
    </system.web>
</configuration>

default.aspx
Code: HTML/ASPX
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="default.aspx.vb" Inherits="WebApplication3.WebForm1" %>
<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <eo:AJAXUploader id="uplUpload" runat="server" TempFileLocation ="~/uploadtemp"  />
                <br />
                <asp:CheckBox runat="server" AutoPostBack="true" ID="chkCheck" OnCheckedChanged="chkCheck_CheckedChanged" Text="Inlcude the damn image" Checked="true" />
                <br />
                <asp:Image runat="server" ID="imgDamn" ImageUrl="~/image.ashx" />
            </div>
        </form>
    </body>
</html>

default.aspx.vb
Code: Visual Basic.NET
''' <summary>Tets page</summary>
Public Class WebForm1
    Inherits System.Web.UI.Page

    ''' <summary>Raises the <see cref="E:System.Web.UI.Control.Load" /> event.</summary>
    ''' <param name="e">The <see cref="T:System.EventArgs" /> object that contains the event data. </param>
    Protected Overrides Sub OnLoad(e As EventArgs)
        MyBase.OnLoad(e)
    End Sub

    Protected Sub chkCheck_CheckedChanged(sender As Object, e As EventArgs)
        imgDamn.Visible = chkCheck.Checked
    End Sub
End Class

image.ashx
Code: HTML/ASPX
<%@ WebHandler Language="VB" CodeBehind="image.ashx.vb" Class="WebApplication3.ImageHandler" %>

image.ashx.vb
Code: Visual Basic.NET
Imports System.Threading

''' <summary>Serves an image with 1 min delay</summary>
Public Class ImageHandler
    Implements System.Web.IHttpHandler

    ''' <summary>Enables processing of HTTP Web requests by a custom HttpHandler that implements the <see cref="T:System.Web.IHttpHandler" /> interface.</summary>
    ''' <param name="context">An <see cref="T:System.Web.HttpContext" /> object that provides references to the intrinsic server objects (for example, Request, Response, Session, and Server) used to service HTTP requests. </param>
    Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest

        Thread.Sleep(60 * 1000)
        context.Response.ContentType = "image/png"
        context.Response.Cache.SetNoStore()
        context.Response.Cache.SetNoServerCaching()
        context.Response.Cache.SetCacheability(HttpCacheability.NoCache)
        context.Response.WriteFile("image.png")

    End Sub

    ''' <summary>Gets a value indicating whether another request can use the <see cref="T:System.Web.IHttpHandler" /> instance.</summary>
    ''' <returns>true if the <see cref="T:System.Web.IHttpHandler" /> instance is reusable; otherwise, false.</returns>
    ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
        Get
            Return False
        End Get
    End Property

End Class

You also need uploadtemp folder, EO.Web.dll reference, standard eo_web.ashx, eo_web.licx, a PNG image image.png. Assembly name is WebnApplication3, root namespace is WebApplication3.

You have one minute to sets it after page is loaded. Select some file and click upload. It fails. If you reload the page, wait for one minute (till the image appears) an try to upload a file, it works.

I can provide entire test project file on request.
eo_support
Posted: Wednesday, August 28, 2013 3:34:47 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,195
Hi,

This makes sense. The AJAXUploader initializes certain members when the HTML body's onload is fired because it needs to wait until the main page finishes loading first. Unfortunately the body's onload event won't fire if an image is still loading. This causes the problem to occur because by the time user initializes the upload, the AJAXUploader has not been initialized yet.

What we can do is to change our code so that upload button will be disabled until the page finishes load. This will prevent the error. However you would also need to optimize your end so that the image loading would not take unusually long. If it indeed takes that long, you may want to use script to load it later rather than loading it in place.

Thanks!
Ðonny
Posted: Thursday, August 29, 2013 3:22:40 AM
Rank: Newbie
Groups: Member

Joined: 12/14/2009
Posts: 7
Can the initialization just be made earlier? At same point when jQuery fires it's ready event? It IMO does not make sense to wait for images.
We basically cannot do anything at our side to prevent this, because it was network error. Some crazy firewall decided to block one of icons in page :-O that usually loads within milliseconds.
eo_support
Posted: Thursday, August 29, 2013 9:06:44 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,195
Thanks for the suggestion. JQuery's ready event does fire much early in this case. We will look into it to see if we can adopt the same method.


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.