modification: gatsby-remark-code-plugin

content/docs/forms.md

@@ -226,7 +226,7 @@ class FileInput extends React.Component {
 }
 ```
 
-[Try it on CodePen.](https://codepen.io/fetard/pen/bYvaJY?editors=0010)
+[Try it on CodePen](codepen://components-and-props/input-type-file)
 
 Note how a `ref` to the file input is used to access the file(s) in the submit handler
 

examples/components-and-props/input-type-file.js

@@ -0,0 +1,26 @@
+class FileInput extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  handleSubmit (event) {
+    event.preventDefault();
+    alert(`Selected file - ${this.fileInput.files[0].name}`);
+  }
+
+  render() {
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <label>
+          Upload file:
+          <input type='file' ref={input => {this.fileInput = input}} />
+        </label>
+        <br/>
+        <button type='submit'>Submit</button>
+      </form>
+    );
+  }
+}
+
+ReactDOM.render(<FileInput />, document.getElementById('root'));