hixie: Include an example for how to get the filename out of input.value (whatwg r3863)

hixie: Include an example for how to get the filename out of input.value
(whatwg r3863)

http://dev.w3.org/cvsweb/html5/spec/Overview.html?r1=1.3028&r2=1.3029&f=h
http://html5.org/tools/web-apps-tracker?from=3862&to=3863

===================================================================
RCS file: /sources/public/html5/spec/Overview.html,v
retrieving revision 1.3028
retrieving revision 1.3029
diff -u -d -r1.3028 -r1.3029
--- Overview.html 15 Sep 2009 11:21:47 -0000 1.3028
+++ Overview.html 15 Sep 2009 11:58:37 -0000 1.3029
@@ -30422,6 +30422,43 @@
   <p>User agents should prevent the user from selecting files that are
   not accepted by one (or more) of these tokens.</p>
 
+  </div><div class="example">
+
+   <p>For historical reasons, the <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attribute prefixes the
+   filename with the string "<code title="">C:\fakepath\</code>". Some
+   legacy user agents actually included the full path (which was a
+   security vulnerability). As a result of this, obtaining the
+   filename from the <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL
+   attribute in a backwards-compatible way is non-trivial. The
+   following function extracts the filename in a suitably compatible
+   manner:</p>
+
+   <pre>function extractFilename(path) {<!--
+  if (path.substr(0, 12) == "C:\\fakepath\\")
+    return path.substr(12);-->
+  var x;
+  x = path.lastIndexOf('\\');
+  if (x &gt;= 0) // Windows-based path
+    return path.substr(x+1);
+  x = path.lastIndexOf('/');
+  if (x &gt;= 0) // Unix-based path
+    return path.substr(x+1);
+  return path; // just the filename
+}</pre>
+
+   <p>This can be used as follows:</p>
+
+   <pre>&lt;p&gt;&lt;input type=file name=image onchange="updateFilename(this.value)"&gt;&lt;/p&gt;
+&lt;p&gt;The name of the file you picked is: &lt;span id="filename"&gt;(none)&lt;/span&gt;&lt;/p&gt;
+&lt;script&gt;
+ function updateFilename(path) {
+   var name = extractFilename(path);
+   document.getElementById('filename').textContent = name;
+ }
+&lt;/script&gt;</pre>
+
+   <!-- How useful this actually is... is unclear. -->
+
   </div><hr><div class="bookkeeping impl">
 
    <p>The following common <code><a href="#the-input-element">input</a></code> element content

Received on Tuesday, 15 September 2009 11:59:37 UTC