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 + +``` + +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) + } + } + }) +}) +```