[whatwg] access to local path in input type="file"

Thu Mar 20 16:58:03 PDT 2008

In the code which follows, both IE7, FF(2.0), and Safari(3.1) allow the user 
to change the src attribute of an image based on her perusal of local file 
space. Opera 9.5 doesn't seem to allow access to the path data necessary for 
accomplishing this rollover effect, and I suspect that may be how it is 
supposed to be according to emerging standards. That is the situation when 
the HTML file is stored on localhost.

If however, one places the code on a server (see 
http://granite.sru.edu/~ddailey/imageUpload.htm) then the program works from 
none of the browsers. apologies in advance if I made a mistake :(

While I understand the possible risk of exposing a path name of the local 
file system to script, the various use cases of allowing users to access 
local images within HTML, the <canvas> tag and within <svg> all seem 
self-evident to me. Is there some standard workaround to allow the user to 
change the source of an image on a web page to one that is locally stored? I 
used to have a dozen mini-apps that took advantage of the ability to do this 
(they even used to work in Netscape 4 and IE 4), but the programs have all 
broken in the past few years in all contexts except IE -- (for example here 
http://granite.sru.edu/~ddailey/svg/clipembed.html where the input type=file 
script is remarkably simple).

What seems odd to me is that the browsers (except Opera) all seem to expose 
the path data to script, despite blocking the easy use of that data. Maybe 
I'm missing something obvious.

Apologies, also, if this issue has already been discussed -- my memory seems 
never to have been what it should have been.

regards,
David

-------------code------------
<html>
<head>
 <script>
 function change(I,s){
  alert(document.getElementById("y").value)
  pieces=I.src.split("/")
  pieces.pop()
  path=pieces.join("/")+"/"
  spieces=s.split(/[\/\\]/)
  file=spieces.pop()
  path=spieces.join("/")+"/"
  alert(path)
  f.Q.value="file://localhost/"+s
  I.src=f.Q.value
 }
 </script>
</head>

<body>
<form id="f">
<input type="file" size="70" id="y" onChange="change(z,this.value)"><br>
<input type="button" value="personalize" onclick="z.src=f.Q.value">
<img src="../p/p0.jpg" id="z" width="75" height="100" border="0" alt=""><br>
<input size="70" id="Q">
</form>

</body>
</html>