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
This commit is contained in:
Artur Paikin 2019-08-09 19:24:29 +03:00 committed by GitHub
parent a57fb08b39
commit a7d7bbd710
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -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 browsers file selector.
```js
const FileInput = require('@uppy/file-input')
@ -91,3 +91,41 @@ strings: {
chooseFiles: 'Choose files'
}
```
## Custom file input
If you dont 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)
}
}
})
})
```