What is @uppy/react?
@uppy/react is a React wrapper for Uppy, a sleek, modular file uploader for web browsers. It allows you to integrate Uppy’s file uploading capabilities into your React applications with ease.
What are @uppy/react's main functionalities?
Drag and Drop File Upload
This feature allows users to drag and drop files into a designated area for uploading. The code sample demonstrates how to set up a basic drag-and-drop file upload component using Uppy and React.
import React from 'react';
import Uppy from '@uppy/core';
import { DragDrop } from '@uppy/react';
const uppy = Uppy();
function App() {
return (
<div>
<h1>Upload your files</h1>
<DragDrop uppy={uppy} />
</div>
);
}
export default App;
Dashboard UI
The Dashboard UI provides a comprehensive interface for file uploading, including previews, progress bars, and the ability to add files from various sources. The code sample shows how to integrate the Dashboard component into a React application.
import React from 'react';
import Uppy from '@uppy/core';
import { Dashboard } from '@uppy/react';
const uppy = Uppy();
function App() {
return (
<div>
<h1>Upload your files</h1>
<Dashboard uppy={uppy} />
</div>
);
}
export default App;
Progress Bar
The Progress Bar component provides a visual indicator of the upload progress. The code sample demonstrates how to add a progress bar to your React application using Uppy.
import React from 'react';
import Uppy from '@uppy/core';
import { ProgressBar } from '@uppy/react';
const uppy = Uppy();
function App() {
return (
<div>
<h1>Upload your files</h1>
<ProgressBar uppy={uppy} />
</div>
);
}
export default App;
Other packages similar to @uppy/react
react-dropzone
react-dropzone is a simple React component for creating a file dropzone. It provides a basic drag-and-drop interface for file uploads. Compared to @uppy/react, it is more lightweight but lacks some of the advanced features like the Dashboard UI and integration with various file sources.
react-filepond
react-filepond is a React wrapper for FilePond, a flexible and fun JavaScript file upload library. It offers a rich set of features including image previews, asynchronous uploads, and a modern user interface. While it provides a more polished UI out of the box, it may not be as modular as @uppy/react.
react-dropzone-uploader
react-dropzone-uploader is a customizable file uploader component for React. It supports drag-and-drop, file previews, and progress bars. It is similar to @uppy/react in terms of functionality but may require more configuration to achieve the same level of customization.
@uppy/react
![Build Status](https://img.shields.io/travis/transloadit/uppy/master.svg?style=flat-square)
React component wrappers around Uppy's officially maintained UI plugins.
Uppy is being developed by the folks at Transloadit, a versatile file encoding service.
Example
const Uppy = require('@uppy/core')
const { DashboardModal } = require('@uppy/react')
const uppy = Uppy()
class Example extends React.Component {
state = { open: false }
render () {
return (
<DashboardModal
uppy={uppy}
open={this.state.open}
onRequestClose={this.handleClose}
/>
)
}
}
Installation
$ npm install @uppy/react --save
We recommend installing from npm and then using a module bundler such as Webpack, Browserify or Rollup.js.
Alternatively, you can also use this plugin in a pre-built bundle from Transloadit's CDN: Edgly. In that case Uppy
will attach itself to the global window.Uppy
object. See the main Uppy documentation for instructions.
Documentation
Documentation for this plugin can be found on the Uppy website.
License
The MIT License.
1.2.0
Released: 2019-06-07
This release fixes an issue when using Transloadit and the @uppy/form plugin. To do so, a new metaFields
option was added to the @uppy/tus plugin.
| Package | Version | Package | Version |
|-|-|-|-|
| @uppy/companion | 1.2.0 | @uppy/transloadit | 1.1.1 |
| @uppy/locales | 1.4.0 | @uppy/tus | 1.2.0 |
| @uppy/robodog | 1.1.1 | uppy | 1.2.0 |
- @uppy/companion: ability to load secret keys from files (#1632 / @dargmuesli)
- @uppy/locales: add Japanese (#1643 / @johnmanjiro13, @s-jcs)
- @uppy/tus: add
metaFields
option (#1644 / @goto-bus-stop)