@uppy/react
Advanced tools
@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.
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;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 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 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.
React component wrappers around Uppy's officially maintained UI plugins.
Uppy is being developed by the folks at Transloadit, a versatile file encoding service.
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}
/>
)
}
// ..snip..
}
$ 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 for this plugin can be found on the Uppy website.
0.30.5
Released: 2019-04-19
| Package | Version | Package | Version | |-|-|-|-| | @uppy/aws-s3-multipart | 0.30.5 | @uppy/progress-bar | 0.30.5 | | @uppy/aws-s3 | 0.30.5 | @uppy/provider-views | 0.30.5 | | @uppy/companion-client | 0.28.5 | @uppy/react-native | 0.0.3 | | @uppy/companion | 0.17.5 | @uppy/react | 0.30.5 | | @uppy/core | 0.30.5 | @uppy/redux-dev-tools | 0.30.5 | | @uppy/dashboard | 0.30.5 | @uppy/robodog | 0.30.5 | | @uppy/drag-drop | 0.30.5 | @uppy/status-bar | 0.30.5 | | @uppy/dropbox | 0.30.5 | @uppy/thumbnail-generator | 0.30.5 | | @uppy/file-input | 0.30.5 | @uppy/transloadit | 0.30.5 | | @uppy/form | 0.30.5 | @uppy/tus | 0.30.5 | | @uppy/golden-retriever | 0.30.5 | @uppy/url | 0.30.5 | | @uppy/google-drive | 0.30.5 | @uppy/utils | 0.30.5 | | @uppy/informer | 0.30.5 | @uppy/webcam | 0.30.5 | | @uppy/instagram | 0.30.5 | @uppy/xhr-upload | 0.30.5 | | @uppy/locales | 0.30.5 | uppy | 0.30.5 |
serverUrl or serverPattern option is used (#1459 / @arturi)restriction-failed event when restriction-failed (#1436 / @allenfantasy)getDroppedFiles module that is an improvement over drag-drop we’ve been using (#1440 / @lakesare)FAQs
React component wrappers around Uppy's official UI plugins.
The npm package @uppy/react receives a total of 81,626 weekly downloads. As such, @uppy/react popularity was classified as popular.
We found that @uppy/react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The 2023 Python Developers Survey reveals key trends in packaging, web frameworks, and developer demographics, highlighting a shift toward innovative tools as the Python community diversifies and grows among less experienced developers.
Security News
GitHub is combatting a new spam campaign that exploits issues with links to malicious downloads, highlighting the need for better moderation tools to protect open-source maintainers' time and security.
Security News
uv, Python's new package manager, offers a faster and more efficient alternative to pip with features that simplify tooling, manage Python versions, and streamline development workflows.