mirror of
https://github.com/transloadit/uppy.git
synced 2026-07-24 02:38:58 +00:00
166 lines
3.7 KiB
Text
166 lines
3.7 KiB
Text
---
|
||
sidebar_position: 3
|
||
slug: /file-input
|
||
---
|
||
|
||
import Tabs from '@theme/Tabs';
|
||
import TabItem from '@theme/TabItem';
|
||
|
||
import UppyCdnExample from '/src/components/UppyCdnExample';
|
||
|
||
# File input
|
||
|
||
The `@uppy/file-input` plugin is the most barebones UI for selecting files — it
|
||
shows a single button that, when clicked, opens up the browser’s file selector.
|
||
|
||
## When should I use it?
|
||
|
||
When you want users to select files from their local machine with a minimal UI.
|
||
|
||
## Install
|
||
|
||
<Tabs>
|
||
<TabItem value="npm" label="NPM" default>
|
||
|
||
```shell
|
||
npm install @uppy/file-input
|
||
```
|
||
|
||
</TabItem>
|
||
|
||
<TabItem value="yarn" label="Yarn">
|
||
|
||
```shell
|
||
yarn add @uppy/file-input
|
||
```
|
||
|
||
</TabItem>
|
||
|
||
<TabItem value="cdn" label="CDN">
|
||
<UppyCdnExample>
|
||
{`
|
||
import { Uppy, FileInput } from "{{UPPY_JS_URL}}"
|
||
const uppy = new Uppy()
|
||
uppy.use(FileInput, { target: document.body })
|
||
`}
|
||
</UppyCdnExample>
|
||
</TabItem>
|
||
</Tabs>
|
||
|
||
## Use
|
||
|
||
```js showLineNumbers
|
||
import Uppy from '@uppy/core';
|
||
import FileInput from '@uppy/file-input';
|
||
|
||
import '@uppy/core/dist/style.min.css';
|
||
import '@uppy/file-input/dist/style.css';
|
||
|
||
new Uppy().use(FileInput, { target: '#uppy-file-input' });
|
||
```
|
||
|
||
:::note
|
||
|
||
The `@uppy/file-input` plugin includes some basic styles for use with the
|
||
[`pretty`](#pretty-true) option, like shown in the
|
||
[example](/examples/xhrupload). You can also choose not to use it and provide
|
||
your own styles instead.
|
||
|
||
Import general Core styles from `@uppy/core/dist/style.css` first, then add the
|
||
File Input styles from `@uppy/file-input/dist/style.css`. A minified version is
|
||
also available as `style.min.css` at the same path. The way to do import depends
|
||
on your build system.
|
||
|
||
:::
|
||
|
||
## API
|
||
|
||
### Options
|
||
|
||
#### `id`
|
||
|
||
A unique identifier for this plugin (`string`, default: `'FileInput'`).
|
||
|
||
#### `title`
|
||
|
||
Configures the title / name shown in the UI, for instance, on Dashboard tabs
|
||
(`string`, default: `'File Input'`).
|
||
|
||
#### `target`
|
||
|
||
DOM element, CSS selector, or plugin to place the audio into (`string` or
|
||
`Element`, default: `null`).
|
||
|
||
#### `pretty`
|
||
|
||
When true, display a styled button that, when clicked, opens the file selector
|
||
UI. When false, a plain old browser `<input type="file">` element is shown
|
||
(`boolean`, default: `true`).
|
||
|
||
#### `inputName`
|
||
|
||
The `name` attribute for the `<input type="file">` element (`string`, default:
|
||
`'files[]'`).
|
||
|
||
#### `locale`
|
||
|
||
```js
|
||
export default {
|
||
strings: {
|
||
// The same key is used for the same purpose by @uppy/robodog's `form()` API, but our
|
||
// locale pack scripts can't access it in Robodog. If it is updated here, it should
|
||
// also be updated there!
|
||
chooseFiles: 'Choose files',
|
||
},
|
||
};
|
||
```
|
||
|
||
## Custom file inpt
|
||
|
||
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 = new 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);
|
||
}
|
||
}
|
||
});
|
||
});
|
||
|
||
// Clear the `<input>` after the upload or when the file was removed
|
||
// so the file can be uploaded again (see
|
||
// https://github.com/transloadit/uppy/issues/2640#issuecomment-731034781).
|
||
uppy.on('file-removed', () => {
|
||
fileInput.value = null;
|
||
});
|
||
|
||
uppy.on('complete', () => {
|
||
fileInput.value = null;
|
||
});
|
||
```
|