What is @uppy/core?
@uppy/core is a modular JavaScript file uploader that integrates with various file sources and provides a highly customizable and extensible API for handling file uploads.
What are @uppy/core's main functionalities?
File Selection
This feature allows users to select files from their local system using a customizable dashboard interface.
const Uppy = require('@uppy/core');
const Dashboard = require('@uppy/dashboard');
const uppy = Uppy();
uppy.use(Dashboard, {
inline: true,
target: 'body'
});
File Upload
This feature enables the uploading of selected files to a specified endpoint using XHR (XMLHttpRequest).
const Uppy = require('@uppy/core');
const XHRUpload = require('@uppy/xhr-upload');
const uppy = Uppy();
uppy.use(XHRUpload, {
endpoint: 'https://my-upload-endpoint.com/upload'
});
uppy.upload().then((result) => {
console.log('Upload complete:', result);
});
Progress Tracking
This feature provides a progress bar to track the upload progress of files.
const Uppy = require('@uppy/core');
const ProgressBar = require('@uppy/progress-bar');
const uppy = Uppy();
uppy.use(ProgressBar, {
target: 'body',
hideAfterFinish: false
});
File Validation
This feature allows for custom validation of files before they are uploaded, such as checking file size or type.
const Uppy = require('@uppy/core');
const uppy = Uppy();
uppy.on('file-added', (file) => {
if (file.size > 1000000) { // 1MB
uppy.removeFile(file.id);
alert('File is too large!');
}
});
Other packages similar to @uppy/core
dropzone
Dropzone is a popular JavaScript library that provides drag-and-drop file uploads with image previews. It is less modular than @uppy/core but offers a simpler setup for basic use cases.
fine-uploader
Fine Uploader is a comprehensive JavaScript library for file uploads that supports various features like chunking, retry, and concurrent uploads. It is more feature-rich but also more complex compared to @uppy/core.
plupload
Plupload is a JavaScript library that handles file uploads with support for multiple runtimes (HTML5, Flash, Silverlight, etc.). It is similar in functionality to @uppy/core but may require more configuration for advanced use cases.
@uppy/core
Uppy is a sleek, modular JavaScript file uploader that integrates seamlessly
with any application. It’s fast, provides a comprehensible API and lets you
worry about more important problems than building a file uploader.
- Fetch files from local disk, remote urls, Google Drive, Dropbox,
Instagram, or snap and record selfies with a camera;
- Preview and edit metadata with a nice interface;
- Upload to the final destination, optionally process/encode
Read the docs |
Try Uppy
Uppy is being developed by the folks at Transloadit,
a versatile file encoding service.
Example
import Uppy from '@uppy/core'
const uppy = new Uppy()
uppy.use(SomePlugin)
Installation
$ npm install @uppy/core
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.
4.0.0-beta.10
Released: 2024-06-04
| Package | Version | Package | Version |
| ---------------------- | ------------- | ---------------------- | ------------- |
| @uppy/angular | 0.7.0-beta.5 | @uppy/instagram | 4.0.0-beta.6 |
| @uppy/audio | 2.0.0-beta.6 | @uppy/locales | 4.0.0-beta.2 |
| @uppy/aws-s3 | 4.0.0-beta.5 | @uppy/onedrive | 4.0.0-beta.6 |
| @uppy/aws-s3-multipart | 4.0.0-beta.6 | @uppy/provider-views | 4.0.0-beta.7 |
| @uppy/box | 3.0.0-beta.6 | @uppy/status-bar | 4.0.0-beta.9 |
| @uppy/companion | 5.0.0-beta.9 | @uppy/transloadit | 4.0.0-beta.7 |
| @uppy/companion-client | 4.0.0-beta.7 | @uppy/tus | 4.0.0-beta.6 |
| @uppy/core | 4.0.0-beta.9 | @uppy/unsplash | 4.0.0-beta.7 |
| @uppy/dashboard | 4.0.0-beta.9 | @uppy/url | 4.0.0-beta.7 |
| @uppy/drop-target | 3.0.0-beta.5 | @uppy/utils | 6.0.0-beta.8 |
| @uppy/dropbox | 4.0.0-beta.7 | @uppy/webcam | 4.0.0-beta.8 |
| @uppy/facebook | 4.0.0-beta.6 | @uppy/xhr-upload | 4.0.0-beta.6 |
| @uppy/form | 4.0.0-beta.4 | @uppy/zoom | 3.0.0-beta.6 |
| @uppy/golden-retriever | 4.0.0-beta.5 | uppy | 4.0.0-beta.10 |
| @uppy/google-drive | 4.0.0-beta.6 | | |
- @uppy/audio: remove unused component props (Antoine du Hamel / #5209)
- @uppy/angular: fix invalid char in
package.json
(Antoine du Hamel / #5224) - meta: use default argument value instead of
defaultProps
(Antoine du Hamel / #5222) - @uppy/angular: upgrade to Angular 18 (Antoine du Hamel / #5215)
- @uppy/utils: remove unused
settle
(Antoine du Hamel / #5210) - @uppy/form: move internal property to private field (Antoine du Hamel / #5214)
- @uppy/dashboard: remove unused component props (Antoine du Hamel / #5213)
- @uppy/status-bar: remove unused component props (Antoine du Hamel / #5211)
- @uppy/audio: move internal property to private field (Antoine du Hamel / #5207)
- @uppy/aws-s3: remove todo (Mikael Finstad / #5200)
- @uppy/core: remove unnecessary todo (Mikael Finstad / #5200)
- @uppy/aws-s3: do not expose internal
assertHost
method (Mikael Finstad / #5200) - @uppy/aws-s3: make passing
signal
consistent (Mikael Finstad / #5200) - @uppy/core: remove
'upload-started'
event (Mikael Finstad / #5200) - @uppy/aws-s3: remove
chunkState
getter (Mikael Finstad / #5200) - @uppy/drop-target: remove
title
property (Mikael Finstad / #5200) - @uppy/golden-retriever: remove unused
ready
setters (Mikael Finstad / #5200) - @uppy/dashboard: remove deprecated
autoOpenFileEditor
option (Mikael Finstad / #5200) - @uppy/aws-s3: remove
uploaderSockets
(Mikael Finstad / #5200) - @uppy/locales: remove hacks for legacy bundle (Mikael Finstad / #5200)
- @uppy/status-bar: rename
StatusBar
to StatusBarUI
(Mikael Finstad / #5200) - @uppy/url: remove unused error handler (Mikael Finstad / #5200)
- @uppy/aws-s3,@uppy/tus,@uppy/utils,@uppy/xhr-upload: remove
uploader
from upload-progress
event (Mikael Finstad / #5200) - @uppy/webcam: remove
facingMode
option (Mikael Finstad / #5200) - @uppy/companion: invert some internal boolean options (Mikael Finstad / #5198)
- @uppy/companion: rename
authProvider
to oauthProvider
(Mikael Finstad / #5198) - @uppy/companion: remove unused headers (Mikael Finstad / #5198)
- @uppy/companion: remove sanitizing of metadata (Mikael Finstad / #5198)
- @uppy/companion-client: do not allow boolean
RequestOptions
(Mikael Finstad / #5198) - @uppy/companion-client: remove deprecated options (Mikael Finstad / #5198)
- @uppy/companion: remove
error.extraData
(Mikael Finstad / #5198) - @uppy/companion-client: make
supportsRefreshToken
default (Mikael Finstad / #5198) - @uppy/companion-client: remove optional chaining (Mikael Finstad / #5198)
- @uppy/companion: capitalize POST (Mikael Finstad / #5198)
- @uppy/companion: simplify code by using modern Node.js APIs (Mikael Finstad / #5198)
- @uppy/companion-client: remove
Socket
(Mikael Finstad / #5198) - @uppy/companion: rename
getExtraConfig
to getExtraGrantConfig
(Mikael Finstad / #5198) - @uppy/companion: change
COMPANION_ENABLE_URL_ENDPOINT
default (Mikael Finstad / #5198) - @uppy/companion: change default value for Redis session prefix (Mikael Finstad / #5198)
- examples: make React example up-to-date (Merlijn Vos / #5205)
- @uppy/core: add type tests (Merlijn Vos / #5153)
- @uppy/provider-views: PartialTree - get rid of
.onFirstRender()
(Evgenia Karunus / #5187) - @uppy/core: pass file to events consistently (Merlijn Vos / #5136)
- docs: assume tree-shaking bundler is the most common case (Antoine du Hamel / #5160)
- @uppy/core: remove
reason
(Antoine du Hamel / #5159) - @uppy/core: remove
resetProgress
and reset-progress
(Mikael Finstad / #5221)