Skip to main content

Uppy 4.0 is here: TypeScript rewrite, Google Photos, React hooks, and much more.

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 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:

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