Gathering detailed insights and metrics for @uppy/store-default
Gathering detailed insights and metrics for @uppy/store-default
Gathering detailed insights and metrics for @uppy/store-default
Gathering detailed insights and metrics for @uppy/store-default
The next open source file uploader for web browsers 🐶
npm install @uppy/store-default
Module System
Min. Node Version
Typescript Support
Node Version
NPM Version
29,244 Stars
10,056 Commits
2,013 Forks
324 Watching
75 Branches
430 Contributors
Updated on 28 Nov 2024
TypeScript (71.72%)
JavaScript (22.26%)
SCSS (4.99%)
Svelte (0.29%)
HTML (0.26%)
Shell (0.26%)
Makefile (0.14%)
Dockerfile (0.06%)
Vue (0.02%)
Cumulative downloads
Total Downloads
Last day
-16.1%
41,656
Compared to previous day
Last week
-2.7%
239,583
Compared to previous week
Last month
8.8%
1,044,110
Compared to previous month
Last year
19.6%
10,833,630
Compared to previous year
1
Uppy is a sleek, modular JavaScript file uploader that integrates seamlessly with any application. It’s fast, has a comprehensible API and lets you worry about more important problems than building a file uploader.
Uppy is being developed by the folks at Transloadit, a versatile API to handle any file in your app.
Tests | |||
---|---|---|---|
Deploys |
Code used in the above example:
1import Uppy from '@uppy/core' 2import Dashboard from '@uppy/dashboard' 3import RemoteSources from '@uppy/remote-sources' 4import ImageEditor from '@uppy/image-editor' 5import Webcam from '@uppy/webcam' 6import Tus from '@uppy/tus' 7 8const uppy = new Uppy() 9 .use(Dashboard, { trigger: '#select-files' }) 10 .use(RemoteSources, { companionUrl: 'https://companion.uppy.io' }) 11 .use(Webcam) 12 .use(ImageEditor) 13 .use(Tus, { endpoint: 'https://tusd.tusdemo.net/files/' }) 14 .on('complete', (result) => { 15 console.log('Upload result:', result) 16 })
Try it online or read the docs for more details on how to use Uppy and its plugins.
1npm install @uppy/core @uppy/dashboard @uppy/tus
Add CSS
uppy.min.css,
either to your HTML page’s <head>
or include in JS, if your bundler of choice
supports it.
Alternatively, you can also use a pre-built bundle from Transloadit’s CDN: Smart
CDN. In that case Uppy
will attach itself to the global window.Uppy
object.
⚠️ The bundle consists of most Uppy plugins, so this method is not recommended for production, as your users will have to download all plugins when you are likely using only a few.
1<!-- 1. Add CSS to `<head>` --> 2<link 3 href="https://releases.transloadit.com/uppy/v4.7.0/uppy.min.css" 4 rel="stylesheet" 5/> 6 7<!-- 2. Initialize --> 8<div id="files-drag-drop"></div> 9<script type="module"> 10 import { 11 Uppy, 12 Dashboard, 13 Tus, 14 } from 'https://releases.transloadit.com/uppy/v4.7.0/uppy.min.mjs' 15 16 const uppy = new Uppy() 17 uppy.use(Dashboard, { target: '#files-drag-drop' }) 18 uppy.use(Tus, { endpoint: 'https://tusd.tusdemo.net/files/' }) 19</script>
Dashboard
— universal UI with previews,
progress bars, metadata editor and all the cool stuff. Required for most UI
plugins like Webcam and InstagramProgress Bar
— minimal progress bar
that fills itself when upload progressesStatus Bar
— more detailed progress,
pause/resume/cancel buttons, percentage, speed, uploaded/total sizes (included
by default with Dashboard
)Informer
— send notifications like “smile”
before taking a selfie or “upload failed” when all is lost (also included by
default with Dashboard
)Drag & Drop
— plain drag and drop areaFile Input
— even plainer “select files”
buttonWebcam
— snap and record those selfies 📷Google Drive
— import files from
Google DriveDropbox
— import files from DropboxBox
— import files from BoxInstagram
— import images and videos
from InstagramFacebook
— import images and videos from
FacebookOneDrive
— import files from Microsoft
OneDriveImport From URL
— import direct URLs from
anywhere on the webThe ⓒ mark means that @uppy/companion
, a
server-side component, is needed for a plugin to work.
Tus
— resumable uploads via the open
tus standardXHR Upload
— regular uploads for any
backend out there (like Apache, Nginx)AWS S3
— plain upload to AWS S3 or
compatible servicesAWS S3 Multipart
— S3-style
“Multipart” upload to AWS or compatible servicesTransloadit
— support for
Transloadit’s robust file uploading and encoding
backendGolden Retriever
— restores files
after a browser crash, like it’s nothingThumbnail Generator
— generates
image previews (included by default with Dashboard
)Form
— collects metadata from <form>
right
before an Uppy upload, then optionally appends results back to the formRedux
— for your
emerging time traveling needsWe aim to support recent versions of Chrome, Firefox, and Safari.
<input type="file">
?Having no JavaScript beats having a lot of it, so that’s a fair question! Running an uploading & encoding business for ten years though we found that in cases, the file input leaves some to be desired:
Not all apps need all these features. An <input type="file">
is fine in many
situations. But these were a few things that our customers hit / asked about
enough to spark us to develop Uppy.
Transloadit’s team is small and we have a shared ambition to make a living from open source. By giving away projects like tus.io and Uppy, we’re hoping to advance the state of the art, make life a tiny little bit better for everyone and in doing so have rewarding jobs and get some eyes on our commercial service: a content ingestion & processing platform.
Our thinking is that if only a fraction of our open source userbase can see the appeal of hosted versions straight from the source, that could already be enough to sustain our work. So far this is working out! We’re able to dedicate 80% of our time to open source and haven’t gone bankrupt yet. :D
Yes, please check out the docs for more information.
Yes, whatever you want on the backend will work with @uppy/xhr-upload
plugin,
since it only does a POST
or PUT
request. Here’s a
PHP backend example.
If you want resumability with the Tus plugin, use one of the tus server implementations 👌🏼
And you’ll need @uppy/companion
if you’d
like your users to be able to pick files from Instagram, Google Drive, Dropbox
or via direct URLs (with more services coming).
.github/CONTRIBUTING.md
CHANGELOG.md
Uppy is used by: Photobox, Issuu, Law Insider, Cool Tabs, Soundoff, Scrumi, Crive and others.
Use Uppy in your project? Let us know!
The MIT License.
No vulnerabilities found.
Reason
30 commit(s) and 19 issue activity found in the last 90 days -- score normalized to 10
Reason
security policy file detected
Details
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
packaging workflow detected
Details
Reason
Found 16/21 approved changesets -- score normalized to 7
Reason
dependency not pinned by hash detected -- score normalized to 2
Details
Reason
dangerous workflow patterns detected
Details
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
45 existing vulnerabilities detected
Details
Score
Last Scanned on 2024-11-18
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More