From a7d7bbd71047811acdfd0bcce31fa4cf6753b6bd Mon Sep 17 00:00:00 2001
From: Artur Paikin <artur@arturpaikin.com>
Date: Fri, 9 Aug 2019 19:24:29 +0300
Subject: [PATCH] docs: Talk about using a custom file input, instead of the
 file-input plugin (#1765)

* Talk about using a custom file input, instead of file-input plugin

* move to the end, handle restriction errors instead of ignoring
---
 website/src/docs/fileinput.md | 40 ++++++++++++++++++++++++++++++++++-
 1 file changed, 39 insertions(+), 1 deletion(-)

diff --git a/website/src/docs/fileinput.md b/website/src/docs/fileinput.md
index 3c88ceddd..45df8632c 100644
--- a/website/src/docs/fileinput.md
+++ b/website/src/docs/fileinput.md
@@ -9,7 +9,7 @@ category: 'Sources'
 tagline: even more plain and simple, just a button
 ---
 
-`@uppy/file-input` is the most barebones UI for selecting files — it shows a single button that, when clicked, opens up the browser's file selector.
+`@uppy/file-input` is the most barebones UI for selecting files — it shows a single button that, when clicked, opens up the browser’s file selector.
 
 ```js
 const FileInput = require('@uppy/file-input')
@@ -91,3 +91,41 @@ strings: {
   chooseFiles: 'Choose files'
 }
 ```
+
+## Custom file input
+
+If you don’t like the look/feel of the button rendered by `@uppy/file-input`, feel free to forgo the plugin and use your own custom button on a page, like so:
+
+```html
+<input type="file" id="my-file-input">
+```
+
+Then add this JS to attach it to Uppy:
+
+```js
+const uppy = Uppy(...)
+const fileInput = document.querySelector('#my-file-input')
+
+fileInput.addEventListener('change', (event) => {
+  const files = Array.from(event.target.files)
+
+  files.forEach((file) => {
+    try {
+      uppy.addFile({
+        source: 'file input',
+        name: file.name,
+        type: file.type,
+        data: file
+      })
+    } catch (err) {
+      if (err.isRestriction) {
+        // handle restrictions
+        console.log('Restriction error:', err)
+      } else {
+        // handle other errors
+        console.error(err)
+      }
+    }
+  })
+})
+```