let sites show preview of image referenced in <input type="file"> from local computer




File Handling
8 years ago
10 months ago


(Reporter: Volodimir, Unassigned)


3.5 Branch
Windows XP

Firefox Tracking Flags

(Not tracked)




8 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; uk; rv: Gecko/20090729 Firefox/3.5.2 (.NET CLR 3.5.30729)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; uk; rv: Gecko/20090729 Firefox/3.5.2 (.NET CLR 3.5.30729)

For a web application I need to reference to a local image from a web page,
using javascript. The local image is chosen by the user through a <input
type="file"> thing, and should be previewed in an <img>. FireFox actively
setting an image's src attribute to the URL obtained from the file selector.
This is, in my opinion, a case where FireFox's security is just too tight.

In Inernet Exploer I can turn off security restriction for selected sites

Reproducible: Always

Steps to Reproduce:
1.load on site html page <input type="file" name="fichier" id="fichier" onchange="inputFileOnChange();" />
<img id="test_img" >
<script type="text/javascript">
function inputFileOnChange() {
	document.getElementById('test_img').src =  document.getElementById('fichier').value;
2. select image from local computer

Actual Results:  
Image did not showed

Expected Results:  
show image like internet exploer


7 years ago
Version: unspecified → 3.5 Branch

Comment 1

10 months ago
Consider this hypothetical situation:

 1. User selects image.
 2. User realises that they selected "Screenshot of Online Receipt" instead of "Photograph of Cat".
 3. Website code has access to "Screenshot of Online Receipt".
 4. User thinks, "Phew! At least I didn't click the Upload button!"
 5. User changes selection to "Photograph of Cat".
 6. User uploads "Photograph of Cat".
 7. Website has access to both "Screenshot of Online Receipt" and "Photograph of Cat".

Despite this, what you are asking for is possible. Using a URL, you could either modify it to access URLs selected elsewhere, or not access it at all; the URL is just a string and you can't tell where a string came from. You can, however, use a Blob or Data URI, because both of these are identifiable; the Blob is a direct reference to the file and the Data URI contains its contents.
See: http://stackoverflow.com/q/20950791/5223757.
You need to log in before you can comment on or make changes to this bug.