Offline file upload

I'm working on an idea about having a picture editor. which would work before uploading files
to server.
It's composed from a simple input file element, which calls handleFiles(this.files) on onchange:

<input type="file" id="inputField" multiple="false" accept="image/*" style="width: 100px; height: 100px; position:absolute; -moz-opacity:0; filter:alpha(opacity: 0); opacity: 0;
    top: 23px; left: 20px;  cursor: hand;" onchange="handleFiles(this.files)"/>

The handleFiles looks like this:

  function handleFiles(files) 
  {
    for (var i = 0; i < files.length; i++) 
    {
      var file = files[i];  
      console.log(file);
      
      var imageType = /image.*/;  
      
      if (!file.type.match(imageType)) {  
        continue;  
      }

      var img = document.createElement("img");
      img.src = window.URL.createObjectURL(file);
      img.height = 100;
      img.width = 100;
      img.onload = function() {
        window.URL.revokeObjectURL(this.src);
      }
      
      jQuery('#avatar').append(img);
    }  
  }  

However I'm getting:

Error thrown at line 74, column 6 in handleFiles(files) in ***/main/chat:
    img.src = window.URL.createObjectURL(file);
called from line 1, column 0 in <anonymous function>(event):
    handleFiles(this.files)

1. Opera doesn't support yet windows.URL?
2. Is it possible at all to have a cross-browser demo that shows a preview pic for editing before uploading it to server?

Thanks!

Originally posted by kriko:

I'm working on an idea about having a picture editor. which would work before uploading files
to server.
It's composed from a simple input file element, which calls handleFiles(this.files) on onchange:

<input type="file" id="inputField" multiple="false" accept="image/*" style="width: 100px; height: 100px; position:absolute; -moz-opacity:0; filter:alpha(opacity: 0); opacity: 0;
    top: 23px; left: 20px;  cursor: hand;" onchange="handleFiles(this.files)"/>

The handleFiles looks like this:

  function handleFiles(files) 
  {
    for (var i = 0; i < files.length; i++) 
    {
      var file = files;  
      console.log(file);
      
      var imageType = /image.*/;  
      
      if (!file.type.match(imageType)) {  
        continue;  
      }

      var img = document.createElement("img");
      img.src = window.URL.createObjectURL(file);
      img.height = 100;
      img.width = 100;
      img.onload = function() {
        window.URL.revokeObjectURL(this.src);
      }
      
      jQuery('#avatar').append(img);
    }  
  }  

However I'm getting:

Error thrown at line 74, column 6 in handleFiles(files) in ***/main/chat:
    img.src = window.URL.createObjectURL(file);
called from line 1, column 0 in <anonymous function>(event):
    handleFiles(this.files)

1. Opera doesn't support yet windows.URL?
2. Is it possible at all to have a cross-browser demo that shows a preview pic for editing before uploading it to server?

Thanks!