[html5] r3863 - [e] (0) Include an example for how to get the filename out of input.value

[whatwg at whatwg.org]

Author: ianh
Date: 2009-09-15 05:04:08 -0700 (Tue, 15 Sep 2009)
New Revision: 3863

Modified:
   index
   source
Log:
[e] (0) Include an example for how to get the filename out of input.value

Modified: index
===================================================================
--- index	2009-09-15 11:27:18 UTC (rev 3862)
+++ index	2009-09-15 12:04:08 UTC (rev 3863)
@@ -34165,6 +34165,45 @@
 
   </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 >= 0) // Windows-based path
+    return path.substr(x+1);
+  x = path.lastIndexOf('/');
+  if (x >= 0) // Unix-based path
+    return path.substr(x+1);
+  return path; // just the filename
+}</pre>
+
+   <p>This can be used as follows:</p>
+
+   <pre><p><input type=file name=image onchange="updateFilename(this.value)"></p>
+<p>The name of the file you picked is: <span id="filename">(none)</span></p>
+<script>
+ function updateFilename(path) {
+   var name = extractFilename(path);
+   document.getElementById('filename').textContent = name;
+ }
+</script></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

Modified: source
===================================================================
--- source	2009-09-15 11:27:18 UTC (rev 3862)
+++ source	2009-09-15 12:04:08 UTC (rev 3863)
@@ -37984,6 +37984,46 @@
 
   </div>
 
+  <div class="example">
+
+   <p>For historical reasons, the <code
+   title="dom-input-value">value</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">value</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 >= 0) // Windows-based path
+    return path.substr(x+1);
+  x = path.lastIndexOf('/');
+  if (x >= 0) // Unix-based path
+    return path.substr(x+1);
+  return path; // just the filename
+}</pre>
+
+   <p>This can be used as follows:</p>
+
+   <pre><p><input type=file name=image onchange="updateFilename(this.value)"></p>
+<p>The name of the file you picked is: <span id="filename">(none)</span></p>
+<script>
+ function updateFilename(path) {
+   var name = extractFilename(path);
+   document.getElementById('filename').textContent = name;
+ }
+</script></pre>
+
+   <!-- How useful this actually is... is unclear. -->
+
+  </div>
+
   <hr>
 
   <div class="bookkeeping impl">