FileReader onLoad and onLoadEnd getting called twice?

[Brandon Donnelson]

Maybe I'm missing something, but I'm wondering why the FileReader onload and onloadend event is getting called more than once? I notated the inline function that is getting called more than once. 

https://code.google.com/p/dart-examples/source/browse/examples/DemoDartImageScaling/ - project

https://code.google.com/p/dart-examples/source/browse/examples/DemoDartImageScaling/ImageScaling.dart#56 - source

#import('dart:html');

void main() {
  new ImageScaler.start();
}

class ImageScaler {
  
  ImageScaler.start() {
    observeFileInput();
  }
  
  void observeFileInput() {
    InputElement fileElement = query("#file");
    fileElement.on.change.add((Event e) {
      processFiles(fileElement.files);
    }, true);
  }
  
  void processFiles(List<File> files) {
    for (File file in files) {
      processFile(file);
    }
  }
  
  void processFile(File file) {
    print("file.name=${file.name}");
    
    if (!isAnImage(file)) {
      window.alert("Oops, that wasn't an image, can you try an image?");
      return;
    }
    
    readIn(file);
  }
  
  bool isAnImage(File file) {
    print("file.type=${file.type}");
    
    Pattern pattern = new RegExp(@"(jpeg|png)");
    
    bool b = false;
    if (file.type.toString().contains(pattern) == true) {
      b = true;
    }
    
    return b;
  }
  
  void readIn(File file) {
    FileReader reader = new FileReader();
    reader.on.loadEnd.add((e) => scale(reader.result)); // source?
    reader.readAsDataURL(file);
  }
  
  void scale(String base64) { // getting called twice???
    print(base64);
  }

}

Brandon

http://c.dart-examples.com

[Brandon Donnelson]

Maybe similar issue: http://code.google.com/p/dart/issues/detail?id=764&q=filereader&colspec=ID%20Type%20Status%20Priority%20Area%20Milestone%20Owner%20Summary

[Brandon Donnelson]

Look like what I was getting may be a fluke. After I changed a few things, its not happening now.

This is working great to scale an image:

#import('dart:html');

final double scaleToRatio = .5;

void main() {
  new ImageScaler.start();
}

class ImageScaler {
  
  ImageScaler.start() {
    observeFileInput();
  }
  
  void observeFileInput() {
    InputElement fileElement = query("#file");

    fileElement.on.change.add((e) => processFiles(fileElement.files), true);

  }
  
  void processFiles(List<File> files) {
    for (File file in files) {
      processFile(file);
    }
  }
  
  void processFile(File file) {
    print("file.name=${file.name}");
    
    if (!isAnImage(file)) {
      window.alert("Oops, that wasn't an image, can you try an image?");
      return;
    }
    
    readIn(file);
  }
  
  bool isAnImage(File file) {
    print("file.type=${file.type}");
    
    Pattern pattern = new RegExp(@"(jpeg|png)");
    
    bool b = false;
    if (file.type.toString().contains(pattern) == true) {
      b = true;
    }
    
    return b;
  }
  
  void readIn(File file) {
    FileReader reader = new FileReader();

    reader.on.loadEnd.add((e) => createImageElement(reader.result));
    reader.readAsDataURL(file);
  }
  
  void createImageElement(String base64) {
    print(base64);
    
    // set the image data and wait for image onload to fire 
    ImageElement originalImg = query("#originImg");
    originalImg.on.load.add((e) => scale(originalImg));
    originalImg.src = base64;
  }
  
  void scale(ImageElement imageElement) {
    CanvasElement canvas = query("#canvas");
    CanvasRenderingContext2D context = canvas.context2d;
    
    // scale the image with ratio
    num height = (imageElement.height * scaleToRatio).toInt();
    num width = (imageElement.width * scaleToRatio).toInt();
    canvas.height = height;
    canvas.width = width;
    
    print("canvas height=$height width=$width");
    
    // tell it to scale image
    context.scale(scaleToRatio, scaleToRatio);
    
    // draw image to canvas
    context.drawImage(imageElement, 0, 0);
  }
  
}

[Brandon Donnelson]

For the late comers to this thread. I got the above working so a small refractor for better multidemo was setup. 

Image scaler code sits here now

https://code.google.com/p/dart-examples/source/browse/#git%2Fexamples%2FDartDemos%2FImageScaling

Brandon

[Stephen Adams]

Hi Brandon,

If you have a moment, could you summarize why it was not working for you originally?  Did you misunderstand the API, have a bug in your code (i.e. wrote something that behaved differently to what you intended), or did you work around a bug in library?

Thanks!

[Brandon Donnelson]

Great question, thanks for asking :)

It's more likely I didn't understand the API, but I had something built with GWT/javascript to compare too. I was getting two print outs after the file reader onload, which gave me the impression the onload and onloadend event was getting fired twice. Although, I think it could have been the console output was funky, b/c some of the previous prints where overwritten. So, once I added and changed the last methods everything seem to work as designed and I no longer saw two outputs (also to note only one file was read with two load events). I've done the same thing with GWT with some native javascript and both do the exact same thing. My two suspects for checking if I dug further would be the console output after the filereader onload event or is there something related to the console print out. I would need to backup my commits to the spot I was in where it was happening last. Last I checked last night it was working fine. 

Would you like to see if I could replicate it?

Have a good day,
Brandon Donnelson

+Follow Me

[Stephen Adams]

On Mon, Jul 2, 2012 at 9:41 AM, Brandon Donnelson <branfl...@gmail.com> wrote:

Great question, thanks for asking :)

It's more likely I didn't understand the API, but I had something built with GWT/javascript to compare too. I was getting two print outs after the file reader onload, which gave me the impression the onload and onloadend event was getting fired twice. Although, I think it could have been the console output was funky, b/c some of the previous prints where overwritten. So, once I added and changed the last methods everything seem to work as designed and I no longer saw two outputs (also to note only one file was read with two load events). I've done the same thing with GWT with some native javascript and both do the exact same thing. My two suspects for checking if I dug further would be the console output after the filereader onload event or is there something related to the console print out. I would need to backup my commits to the spot I was in where it was happening last. Last I checked last night it was working fine. 

Would you like to see if I could replicate it?

 

My main concern is if the library is broken in some way.  Since this is probably not the case, I would not bother.

Thanks!

[Brandon Donnelson]

Good point. At this point, I'd say it works as designed. :) 

Great job :)

Have a good day,
Brandon Donnelson

+Follow Me