mirror of
https://github.com/transloadit/uppy.git
synced 2026-07-23 18:29:09 +00:00
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:
parent
a57fb08b39
commit
a7d7bbd710
1 changed files with 39 additions and 1 deletions
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue