|
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)
|
|
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.
|
|
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!
|
|
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.
|
|
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.
|
|