whatwg  

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

ddailey
Thu, 20 Mar 2008 17:37:41 -0700

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>