add File Input

Author: Bunlong

_data/navigation.yml

@@ -116,6 +116,8 @@ docs:
         url: /what-is-uncontrolled-component
       - title: "Setting Default Value"
         url: /set-default-value-uncontrolled-component
+      - title: "File Input"
+        url: /file-input-uncontrolled-component
       # - title: "Installation"
       #   url: /install-create-react-app
       # - title: "Structure"

_docs/47-set-default-value-uncontrolled-component.md

@@ -1,7 +1,7 @@
 ---
 title: "Setting Default Value"
 permalink: /set-default-value-uncontrolled-component
-excerpt: "Setting  Default Value - Learn React"
+excerpt: "Setting Default Value Uncontrolled Component - Learn React"
 last_modified_at: 2018-05-23T15:58:49-04:00
 ---
 

_docs/48-file-input-uncontrolled-component.md

@@ -0,0 +1,17 @@
+---
+title: "File Input"
+permalink: /file-input-uncontrolled-component
+excerpt: "File Input Uncontrolled Component - Learn React"
+last_modified_at: 2018-05-23T15:58:49-04:00
+---
+
+In HTML, an `<input type="file">` lets the user choose one or more files from their device storage to be uploaded to a server or manipulated by JavaScript via the [File API](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications).
+
+In React, an `<input type="file">` is always an uncontrolled component because its value can only be set by a user, and not programmatically.
+
+You should use the [File API](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications) to interact with the files. 
+
+The example below I shows how to create a `ref` to the DOM node to access file(s) in a submit handler:
+
+<p data-height="265" data-theme-id="0" data-slug-hash="JvqMpG" data-default-tab="js,result" data-user="Bunlong" data-embed-version="2" data-pen-title="JvqMpG" class="codepen">See the Pen <a href="https://codepen.io/Bunlong/pen/JvqMpG/">JvqMpG</a> by Bunlong (<a href="https://codepen.io/Bunlong">@Bunlong</a>) on <a href="https://codepen.io">CodePen</a>.</p>
+<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

_site/index.html

@@ -31,7 +31,7 @@
 
 
 
-  <meta property="article:published_time" content="2018-05-24T13:59:22+07:00">
+  <meta property="article:published_time" content="2018-05-24T15:15:22+07:00">
 
 
 
@@ -668,6 +668,14 @@
 
             <li><a href="/set-default-value-uncontrolled-component" class="">Setting Default Value</a></li>
 
+            
+            
+
+            
+            
+
+            <li><a href="/file-input-uncontrolled-component" class="">File Input</a></li>
+          
         </ul>
 
       </li>

_site/sitemap.xml

@@ -193,6 +193,10 @@
 <lastmod>2018-05-24T02:58:49+07:00</lastmod>
 </url>
 <url>
+<loc>/file-input-uncontrolled-component</loc>
+<lastmod>2018-05-24T02:58:49+07:00</lastmod>
+</url>
+<url>
 <loc>/</loc>
 </url>
 </urlset>