Skip to main content

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 install @uppy/file-input

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' });
note

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;
});