From 3ed5a51eeb92a2a34f615d04d2b3c5a6b74e4d51 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 5 Feb 2018 18:01:25 +0000
Subject: [PATCH] Move the section on file inputs to avoid circular learning
 dep (#588)

---
 content/docs/forms.md                           |  9 ++-------
 content/docs/uncontrolled-components.md         | 17 +++++++++++++++++
 .../input-type-file.js                          |  0
 3 files changed, 19 insertions(+), 7 deletions(-)
 rename examples/{forms => uncontrolled-components}/input-type-file.js (100%)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index b8a3c1bf8..989e89fd2 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -189,6 +189,7 @@ Overall, this makes it so that `<input type="text">`, `<textarea>`, and `<select
 >```js
 ><select multiple={true} value={['B', 'C']}>
 >```
+
 ## The file input Tag
 
 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).
@@ -197,13 +198,7 @@ In HTML, an `<input type="file">` lets the user choose one or more files from th
 <input type="file" />
 ```
 
-In React, an `<input type="file" />` works similarly to a normal `<input/>` with one important difference: **it is read-only**. (You can't set the value programmatically.) Instead, you should use the File API to interact with the files.
-
-The following example shows how a `ref` can be used to access file(s) in a submit handler:
-
-`embed:forms/input-type-file.js`
-
-[Try it on CodePen](codepen://forms/input-type-file)
+Because its value is read-only, it is an **uncontrolled** component in React. It is discussed together with other uncontrolled components [later in the documentation](/docs/uncontrolled-components.html#the-file-input-tag).
 
 ## Handling Multiple Inputs
 
diff --git a/content/docs/uncontrolled-components.md b/content/docs/uncontrolled-components.md
index f1bf1cdc9..4bd742921 100644
--- a/content/docs/uncontrolled-components.md
+++ b/content/docs/uncontrolled-components.md
@@ -64,3 +64,20 @@ render() {
 ```
 
 Likewise, `<input type="checkbox">` and `<input type="radio">` support `defaultChecked`, and `<select>` and `<textarea>` supports `defaultValue`.
+
+## The file input Tag
+
+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).
+
+```html
+<input type="file" />
+```
+
+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 to interact with the files. The following example shows how to create a [ref to the DOM node](/docs/refs-and-the-dom.html) to access file(s) in a submit handler:
+
+`embed:uncontrolled-components/input-type-file.js`
+
+[Try it on CodePen](codepen://uncontrolled-components/input-type-file)
+
diff --git a/examples/forms/input-type-file.js b/examples/uncontrolled-components/input-type-file.js
similarity index 100%
rename from examples/forms/input-type-file.js
rename to examples/uncontrolled-components/input-type-file.js