529736 - image elements created with File.getAsDataURL() sometimes incorrectly have 0 width and height

Status: RESOLVED INVALID

(Firefox :: General, defect)

Description

[Fred Obermann]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.2b3) Gecko/20091115 Firefox/3.6b3
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.2b3) Gecko/20091115 Firefox/3.6b3

Here is some JavaScript that reveals this problem. Note 'dbg()' appends its arguments to a DIV element on the web page for debugging purposes

ctlr.handleDrop   = function(event) {
    event.stopPropagation(); event.preventDefault();
    var  w, h, img, files = event.dataTransfer.files
    dbg("hello from handleDrop")
    for (var i = 0; i < files.length; i++) {
        dbg("doing image: " + i )
        img            = $('<img>')[0] // yes this is a jQueryism
        img.className  = 'uploading'
        img.src        = files[i].getAsDataURL() 
        tmp            = files[i].getAsDataURL() 
        w=img.width;  h= img.height
        img.id         = MD5(tmp)
        dbg("image.id=" + img.id + ", image_width=" + w + ", img_height=" + h)
        etc., etc,

This code fragment is part of a photo-layout-editor and is exercised when I drag and drop one or more jpeg files from the desktop to a dropZone (an element for which 'handleDrop' is defined). The same jpeg file usually results in an image with non-zero width and height, but sometimes it results in an image with 0 width and height. 

Reproducible: Sometimes

Steps to Reproduce:
1. drag a jpeg file onto the dropZone on the web page
2. check to see that a thumbnail image shows up
3. if it does not show up, check the debugging zone to see what dimensions the browser thinks that the image created from the dropped file has.
Actual Results:  
hello from handleDrop
doing image: 0
image.id=f8f8cbd0d2f52d2cb03259ebab84c07c, image_width=0, img_height=0

Expected Results:  
hello from handleDrop
doing image: 0
image.id=f8f8cbd0d2f52d2cb03259ebab84c07c, image_width=401, img_height=439

When a jpeg file is dropped on a web page, and an image element is created through JavaScript from the file using getAsDataURL(), the resulting image element should consistently have the width and height properties set to the height and width of the image in the jpeg file

Comment 1

[tylereed]

Attachment: Lets user select file, and alerts the width twice

I am also getting this bug on Windows XP with Firefox 3.6 [Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2) Gecko/20100115 Firefox/3.6 (.NET CLR 3.5.30729)].

I also attempted to use FileReader and getDataAsURL(), and the same problem occurred.  Oddly enough, the bug only happens once.  When image.width is called again, it has the proper width.

Comment 2

[Fred Obermann]

I think this 'problem' is a due to my misunderstanding of how the browser works behind the scenes to instantiate images. I assumed that the assigment statement:

'img.src        = files[i].getAsDataURL()' 

would not return until the image had fully loaded the its source and internally computed its dimensions.  Evidently this is not the case.  So there is a race condition between the src-loading code and the subsequent assignment of dimensions. Since this is happening totally on the client sometimes the image is fully instantiated before the get-dimensions code executes, and sometimes not. The solution is get the dimensions in the context of of an 'onLoad' event handler.  Sorry for the false alarm.