9

I have the following code that presents the user with a preview of the image they're trying to upload and works really well in FF:

var img = document.createElement('img');
img.src = $('#imageUploader').get(0).files[0].getAsDataURL();

The problem is, getAsDataURL() only works in FF. Is there something similar/a workaround for this kind of functionality in Chrome (specifically)?

Jason
  • 51,583
  • 38
  • 133
  • 185
  • pretty much. You will need to use gears, flash, or java. In IE6 you can just get the value of the file upload and use "file:///..." to display the preview, But I think they 86'd that in ie7. – David Murdoch May 03 '10 at 11:25
  • i don't believe you. someone must know of a non-flash way. – Jason May 03 '10 at 23:16
  • Isn't the `.get()` method supposed to load data from the server with a GET request? (http://api.jquery.com/jQuery.get/) Maybe you meant `.eq()`? – Felix May 04 '10 at 08:23
  • There is not such a way. The standard process is stalled, when it is confirmed, the Firefox team will update their API (which they are now discouraging the public to use, check https://developer.mozilla.org/en/DOM/File) to conform to it, and the Webkit one will implement it – Victor Jalencas May 04 '10 at 09:33
  • I simply refuse to believe that the only way to achieve this effect is with flash or an applet. SOMEONE has to know of a way. Especially with all the web8 effects out there – Jason May 04 '10 at 16:53
  • 1
    you are stubborn and kinda grumpy. – David Murdoch May 06 '10 at 11:34
  • it's these damn kids always on my lawn – Jason May 06 '10 at 16:18

2 Answers2

2

If the browser doesn't support getAsDataURL you could make sure that the file input is instead using Gears' openFiles (scroll down) to read a file selected by the user. Google ain't working on Gears anymore, but it will work in Chrome, at least until getAsDataURL() gets implemented.

EDIT: Changed answer to be more helpful.

Henrik Hansen
  • 2,180
  • 1
  • 14
  • 19
0

IE does not yet support the File API. Anyhow, you need to use a FileReader to read a file. Also, the file is not its file name (your variable naming is a little ambiguous).

file = fileObj.files[0];
var fr = new FileReader;
fr.onloadend = changeimg;
fr.readAsDataURL(file)
Aram Mkrtchyan
  • 2,690
  • 4
  • 31
  • 47
  • But, eh, the question isn't about IE, it's about Chrome. (The question is also really old - that code should work in the current version of Chrome). – Yi Jiang Nov 09 '11 at 15:46