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
- NPM
- Yarn
- CDN
npm install @uppy/file-input
yarn add @uppy/file-input
The bundle consists of most Uppy plugins, so this method is not recommended for production, as your users will have to download all plugins when you are likely using only a few.
It can be useful to speed up your development environment, so don't hesitate to use it to get you started.
<!-- 1. Add CSS to `<head>` -->
<link href="https://releases.transloadit.com/uppy/v4.4.0/uppy.min.css" rel="stylesheet">
<!-- 2. Initialize -->
<div id="uppy"></div>
<script type="module">
import { Uppy, FileInput } from "https://releases.transloadit.com/uppy/v4.4.0/uppy.min.mjs"
const uppy = new Uppy()
uppy.use(FileInput, { target: document.body })
</script>
Use
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' });
The @uppy/file-input
plugin includes some basic styles for use with the
pretty
option, like shown in the
example. 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
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:
<input type="file" id="my-file-input" />
Then add this JS to attach it to Uppy:
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;
});