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.
0.30.4
Released: 2019-04-04
| Package | Version | Package | Version |
|-|-|-|-|
| @uppy/aws-s3-multipart | 0.30.4 | @uppy/progress-bar | 0.30.4 |
| @uppy/aws-s3 | 0.30.4 | @uppy/provider-views | 0.30.4 |
| @uppy/companion-client | 0.28.4 | @uppy/react | 0.30.4 |
| @uppy/companion | 0.17.4 | @uppy/redux-dev-tools | 0.30.4 |
| @uppy/core | 0.30.4 | @uppy/robodog | 0.30.4 |
| @uppy/dashboard | 0.30.4 | @uppy/status-bar | 0.30.4 |
| @uppy/drag-drop | 0.30.4 | @uppy/thumbnail-generator | 0.30.4 |
| @uppy/dropbox | 0.30.4 | @uppy/transloadit | 0.30.4 |
| @uppy/file-input | 0.30.4 | @uppy/tus | 0.30.4 |
| @uppy/form | 0.30.4 | @uppy/url | 0.30.4 |
| @uppy/golden-retriever | 0.30.4 | @uppy/utils | 0.30.4 |
| @uppy/google-drive | 0.30.4 | @uppy/webcam | 0.30.4 |
| @uppy/informer | 0.30.4 | @uppy/xhr-upload | 0.30.4 |
| @uppy/instagram | 0.30.4 | uppy | 0.30.4 |
- build: ⚠️ remove !important (postcss-safe-important) (#1344 / @arturi)
- @uppy/core: un-hardcode concat in
youCanOnlyUploadFileTypes
locale: In some languages, it probably doesn't make much sense to put the list
of allowed file types at the end. The list of mime types/extensions may not be desired at all, so now you can omit %{types} to not show it. (#1374 / @goto-bus-stop) - @uppy/core: ⚠️ YMPT™: Yet More Progress Tweaks — #1093 accidentally omitted file size reporting for GDrive/Dropbox uploads, this adds it back.
Unsized files (like instagram photos) now are stored with size: null instead of 0 (#1376 / @goto-bus-stop)
- @uppy/core: make allowedFileTypes extensions case insensitive (#1341 / @goto-bus-stop)
- @uppy/companion: ⚠️ fix instagram hanging uploads (#1274 / @ifedapoolarewaju)
- @uppy/companion-client: remove the use of window.location for React Native support (#1393 / @ifedapoolarewaju)
- typescript: ⚠️ fix uppy package use with allowSyntheticImports: false (#1396 / @goto-bus-stop)
- @uppy/core: ⚠️ remove console.dir, since it’s probably unnessesary now and not supported in React Native (@arturi / a4f94a8d6b475657837f7c51dfb0670cc77fc3de)
- @uppy/xhr-upload: allow customized option to set upload status (#1360 / @Mactaivsh)
- @uppy/dashboard: fix icons jiggling on hover in safari (#1410 / @lakesare)
- @uppy/dashboard: the list items are now even out (#1398 / @lakesare)
- @uppy/dashboard: remove jumpiness (mobile --> desktop) when uppy loads (#1383 / @lakesare)
- @uppy/dashboard: Protect some more styles from bleeding (#1362 / @arturi)
- build: Refactor npm scripts, clean up unused ones (#1392 / @kvz, @arturi)
- build: Speed up website deploys (73f89f08d9dde9e096285a952528976a69d923cf / @kvz)
- @uppy/xhr-upload: ⚠️ load CompanionClient appropriately (c1abfea33d0c3e80809814c1048b156028c8fcf9 / @ifedapoolarewaju)
- @uppy/companion: ⚠️ send null when download is complete (@ifedapoolarewaju / de04c7978c6713995cbf1717f6ca7ffd292cdeb1)
- @uppy/companion: overwrite bytestotal for only tus uploads (d9ec8d28f4c97da4c0dcb46fbf5804a0ee484eeb / @ifedapoolarewaju)
- @uppy/companion: install git so we can fetch tus-js-client fork (#1404 / @goto-bus-stop)
- @uppy/companion-client: ⚠️ return 401 for invalid access token (#1298 / @ifedapoolarewaju)
- @uppy/companion-client: ⚠️ add asyn wrapper around token storage (#1369 / @ifedapoolarewaju)
- @uppy/companion: Updated the callback URIs to reflect their correct location (#1366 / @HughbertD)
- @uppy/companion: do not use Uploader instance if options validation failed #1354
- @uppy/status-bar: fix StatusBar error tooltip positioning (f83b4b06d958a1f7e78885a61b645c3371feb1ae / @arturi)
- @uppy/google-drive Show thumbnails instead of a generic icon in Google Drive (#1363 / @arturi)
- @uppy/dropbox: HTTP-header-safe JSON for dropbox (#1371 / @yonahforst)
- @uppy/informer: made the tooltip not overflow the uppy container (#1382 / @lakesare)
- @uppy/aws-s3-multipart: for remote aws-s3 uploads (#1350 / @ifedapoolarewaju)
- examples: use template + demo key for transloadit-textarea example (#1375 / @goto-bus-stop)
- website: add markdown snippets example (#1379 / @arturi)
- website: provide simple framework for doing blog post series (#1373 / @kvz)
- locales: Remove outdated locales for now (#1355 / @arturi)
- @uppy/thumbnail-generator: do not export tainted canvas, fixes #1321 (#1343 / @goto-bus-stop)
- @uppy/companion: replace text only when text is valid (985fd62ed6017ea3786eefd2c222caeb26d7998e / @ifedapoolarewaju)