Skip to content

Commit

Permalink
Merge branch 'main' into 4.x
Browse files Browse the repository at this point in the history 
* main:
  meta: enable prettier for markdown (#5133)
  @uppy/xhr-upload: do not throw when res is missing url (#5132)
  @uppy/companion: coerce `requestUrl` to a string (#5128)
  Release: [email protected] (#5127)
  meta: enforce use of `.js` extension in `import type` declarations (#5126)
  @uppy/core: add instance ID to generated IDs (#5080)
  @uppy/core: reference updated i18n in Restricter (#5118)
  • Loading branch information
@Murderlon
Murderlon committed May 2, 2024
2 parents b8f8f8a + 7d69373 commit 9d8fb57
Show file tree
Hide file tree
Showing 71 changed files with 1,316 additions and 651 deletions.
277 changes: 202 additions & 75 deletions .github/CONTRIBUTING.md
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion .prettierignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,5 @@ node_modules/
*.cjs
*.mjs
!private/js2ts/*
*.md
*.lock
CHANGELOG.md
130 changes: 94 additions & 36 deletions BACKLOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,84 +2,142 @@

<!--lint disable no-literal-urls no-undefined-references-->

These are ideas that are planned for specific versions or act as a backlog without a clear date.
PRs are welcome! Please do open an issue to discuss first if it's a big feature, priorities may have changed after something was added here.
These are ideas that are planned for specific versions or act as a backlog
without a clear date. PRs are welcome! Please do open an issue to discuss first
if it's a big feature, priorities may have changed after something was added
here.

## `3.0.0`

- [x] Switch to ES Modules (ESM)
- [x] @uppy/image-editor: Remove silly hack to work around non-ESM.
- [ ] Some not too breaking breaking changes. Go through TODOs (@arturi, @aduh95, @Murderlon)
- [ ] Some not too breaking breaking changes. Go through TODOs (@arturi,
@aduh95, @Murderlon)
- [ ] Companion breaking changes, like S3 keys (@mifi)
- [x] New remote-sources preset
- [x] Deprecate Robodog
- [x] Remove from 3.x branch (@aduh95)
- [x] Update docs that refer to Robodog (@arturi)
- [ ] Update Transloadit.com examples and docs to use @uppy/transloadit + @uppy/remote-sources plugins instead of @uppy/robodog (@arturi)
- [ ] Update Transloadit.com examples and docs to use @uppy/transloadit +
@uppy/remote-sources plugins instead of @uppy/robodog (@arturi)

## `4.0.0`

- [ ] core: change the preprocessing --> uploading flow to allow for files to start uploading right away after their preprocessing step has finished. See #1738 (@goto-but-stop)
- [ ] companion: add more reliable tests to catch edge cases in companion. For example testing that oauth works for multiple companion instances that use a master Oauth domain.
- [ ] Consider updating the name of @uppy/aws-s3 and @uppy/aws-s3-multipart to reflect it also supports Google Cloud Storage, Wasabi, and other cloud providers.
- [ ] Consider fixing all locale files to follow the bcp-47 standard (nl_NL --> nl-NL)
- [ ] core: change the preprocessing --> uploading flow to allow for files to
start uploading right away after their preprocessing step has finished.
See #1738 (@goto-but-stop)
- [ ] companion: add more reliable tests to catch edge cases in companion. For
example testing that oauth works for multiple companion instances that use
a master Oauth domain.
- [ ] Consider updating the name of @uppy/aws-s3 and @uppy/aws-s3-multipart to
reflect it also supports Google Cloud Storage, Wasabi, and other cloud
providers.
- [ ] Consider fixing all locale files to follow the bcp-47 standard (nl_NL -->
nl-NL)

## Unplanned

### Core

- [ ] Make sure Uppy works well in VR
- [ ] normalize file names when uploading from iOS? Can we do it with meta data? date? `image-${index}`? #678
- [ ] Can Uppy upload a lot of files at once? Seems to fail now: https://github.com/transloadit/uppy/issues/3313 (@aduh95, @Murderlon)
- [ ] Consider how we can make Uppy smaller. Replace some packages with smaller alternatives. Talk about Socket.io again (@aduh95)
- [ ] normalize file names when uploading from iOS? Can we do it with meta data?
date? `image-${index}`? #678
- [ ] Can Uppy upload a lot of files at once? Seems to fail now:
https://github.com/transloadit/uppy/issues/3313 (@aduh95, @Murderlon)
- [ ] Consider how we can make Uppy smaller. Replace some packages with smaller
alternatives. Talk about Socket.io again (@aduh95)
- [ ] Better events — more data, consistency, naming (@Murderlon)

### Dashboard

- [ ] Dashboard UI should support 20 providers (@arturi)
- [ ] Allow minimizing the Dashboard during upload (Uppy then becomes just a tiny progress indicator) (@arturi)
- [ ] Display data like image resolution on file cards. should be done by thumbnail generator maybe #783
- [ ] Possibility to edit/delete more than one file at once. example: add copyrigh info to 1000 files #118, #97
- [ ] Possibility to work on already uploaded / in progress files. We'll just provide the `fileId` to the `file-edit-complete` event so that folks can more easily roll out custom code for this themselves #112, #113, #2063
- [ ] Focus jumps weirdly if you remove a file https://github.com/transloadit/uppy/pull/2161#issuecomment-613565486
- [ ] A mini UI that features drop & progress (may involve a `mini: true` options for dashboard, may involve drop+progress or new plugin) (@arturi)
- [ ] Add a Load More button so you don't have to TAB endlessly to get to the upload button (https://github.com/transloadit/uppy/issues/1419)
- [ ] Allow minimizing the Dashboard during upload (Uppy then becomes just a
tiny progress indicator) (@arturi)
- [ ] Display data like image resolution on file cards. should be done by
thumbnail generator maybe #783
- [ ] Possibility to edit/delete more than one file at once. example: add
copyrigh info to 1000 files #118, #97
- [ ] Possibility to work on already uploaded / in progress files. We'll just
provide the `fileId` to the `file-edit-complete` event so that folks can
more easily roll out custom code for this themselves #112, #113, #2063
- [ ] Focus jumps weirdly if you remove a file
https://github.com/transloadit/uppy/pull/2161#issuecomment-613565486
- [ ] A mini UI that features drop & progress (may involve a `mini: true`
options for dashboard, may involve drop+progress or new plugin) (@arturi)
- [ ] Add a Load More button so you don't have to TAB endlessly to get to the
upload button (https://github.com/transloadit/uppy/issues/1419)

### New plugins

- [ ] WordPress Back-end plugin. Should be another Transloadit Integration based on Robodog Dashboard(?) we should add a provider, and possibly offer already-uploaded content
- [ ] WordPress Front-end Gravity Forms Uppy plugin so one form field could be an Uppy-powered file input
- [ ] A WakeLock based plugin that keeps your phone from going to sleep while an upload is ongoing https://github.com/transloadit/uppy/issues/1725
- [ ] WordPress Back-end plugin. Should be another Transloadit Integration based
on Robodog Dashboard(?) we should add a provider, and possibly offer
already-uploaded content
- [ ] WordPress Front-end Gravity Forms Uppy plugin so one form field could be
an Uppy-powered file input
- [ ] A WakeLock based plugin that keeps your phone from going to sleep while an
upload is ongoing https://github.com/transloadit/uppy/issues/1725
- [ ] Improve image editor: filters for images, no crashes (@aduh95)

### New providers

- [ ] Google Photos (#2163)
- [ ] MediaLibrary provider which shows you files that have already been uploaded #450, #1121, #1112 #362
- [ ] MediaLibrary provider which shows you files that have already been
uploaded #450, #1121, #1112 #362
- [ ] Giphy image search (on top of Unsplash plugin) ()
- [ ] Image search (via Google or Bing or DuckDuckGo): use duckduckgo-images-api or Google Search API (@arturi)
- [ ] Image search (via Google or Bing or DuckDuckGo): use duckduckgo-images-api
or Google Search API (@arturi)
- [ ] Vimeo #2872

### Miscellaneous

- [ ] goldenretriever: make it work with aws multipart https://community.transloadit.com/t/resumable-aws-s3-multipart-integration/14888 (@goto-bus-stop)
- [ ] goldenretriever: make it work with aws multipart
https://community.transloadit.com/t/resumable-aws-s3-multipart-integration/14888
(@goto-bus-stop)
- [ ] provider: add sorting (by date) #254
- [ ] qa: add one integration test (or add to existing test) that uses more exotic (tus) options such as `useFastRemoteRetry` or `removeFingerprintOnSuccess` https://github.com/transloadit/uppy/issues/1327 (@arturi, @ifedapoolarewaju)
- [x] react: Add a React Hook to manage an Uppy instance https://github.com/transloadit/uppy/pull/1247#issuecomment-458063951 (@goto-bus-stop)
- [ ] qa: add one integration test (or add to existing test) that uses more
exotic (tus) options such as `useFastRemoteRetry` or
`removeFingerprintOnSuccess`
https://github.com/transloadit/uppy/issues/1327 (@arturi,
@ifedapoolarewaju)
- [x] react: Add a React Hook to manage an Uppy instance
https://github.com/transloadit/uppy/pull/1247#issuecomment-458063951
(@goto-bus-stop)
- [ ] rn: Uppy React Native works with Expo, now let's make it work without
- [ ] rn: Uppy React Native works with Url Plugin, now let's make it work with Instagram
- [ ] security: consider iframe / more security for Transloadit/Uppy integration widget and Uppy itself. Page can’t get files from Google Drive if its an iframe
- [ ] statusbar: Add a confirmation of the cancel action (https://github.com/transloadit/uppy/issues/1418) as well as ask the user if they really want to navigate away while an upload is in progress via `onbeforeunload` (@arturi)
- [ ] uploaders: consider not showing progress updates from the server after an upload’s been paused. Perhaps the button can be disabled and say `Pausing..` until Companion has actually stopped transmitting updates (@arturi, @ifedapoolarewaju)
- [ ] rn: Uppy React Native works with Url Plugin, now let's make it work with
Instagram
- [ ] security: consider iframe / more security for Transloadit/Uppy integration
widget and Uppy itself. Page can’t get files from Google Drive if its an
iframe
- [ ] statusbar: Add a confirmation of the cancel action
(https://github.com/transloadit/uppy/issues/1418) as well as ask the user
if they really want to navigate away while an upload is in progress via
`onbeforeunload` (@arturi)
- [ ] uploaders: consider not showing progress updates from the server after an
upload’s been paused. Perhaps the button can be disabled and say
`Pausing..` until Companion has actually stopped transmitting updates
(@arturi, @ifedapoolarewaju)
- [ ] xhr: allow sending custom headers per file (as proposed in #785)
- [ ] website: It would be nice in the long run to have a dynamic package builder here right on the website where you can select the plugins you need/want and it builds and downloads a minified version of them? Sort of like jQuery UI: https://jqueryui.com/download/
- [ ] webcam: Specify the resolution of the webcam images/video. We should add a way to specify any custom 'constraints' (aspect ratio, resolution, mimetype (`/video/mp4;codec=h264`), bits per second, etc) to the Webcam plugin #876
- [ ] Constructor to build Uppy with what you need, “Dashboard example meets Transloadit Wizard”. Select language, modes, providers — get code ready to use. Maybe integrate Transloadit Wizard in there as well (@arturi, @Murderlon)
- [ ] website: It would be nice in the long run to have a dynamic package
builder here right on the website where you can select the plugins you
need/want and it builds and downloads a minified version of them? Sort of
like jQuery UI: https://jqueryui.com/download/
- [ ] webcam: Specify the resolution of the webcam images/video. We should add a
way to specify any custom 'constraints' (aspect ratio, resolution,
mimetype (`/video/mp4;codec=h264`), bits per second, etc) to the Webcam
plugin #876
- [ ] Constructor to build Uppy with what you need, “Dashboard example meets
Transloadit Wizard”. Select language, modes, providers — get code ready to
use. Maybe integrate Transloadit Wizard in there as well (@arturi,
@Murderlon)

### Needs research

- [ ] Add a prepublish test that checks if `npm pack` is not massive (@goto-bus-stop)
- [ ] Add a prepublish test that checks if `npm pack` is not massive
(@goto-bus-stop)
- [ ] Add https://github.com/pa11y/pa11y for automated accessibility testing?
- [ ] Add lighthouse for automated performance testing?
- [ ] Switch one existing e2e test to use Parcel (create-react-app already using webpack) (@arturi)
- [ ] Add typescript with JSDoc for @uppy/core https://github.com/Microsoft/TypeScript/wiki/Type-Checking-JavaScript-Files (@arturi)
- [ ] Switch one existing e2e test to use Parcel (create-react-app already using
webpack) (@arturi)
- [ ] Add typescript with JSDoc for @uppy/core
https://github.com/Microsoft/TypeScript/wiki/Type-Checking-JavaScript-Files
(@arturi)
120 changes: 70 additions & 50 deletions BUNDLE-README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,74 +3,94 @@
Hi, thanks for trying out the bundled version of the Uppy File Uploader. You can use
this from a CDN (`<script src="https://releases.transloadit.com/uppy/v4.0.0-beta.4/uppy.min.js"></script>`) or bundle it with your webapp.

Note that the recommended way to use Uppy is to install it with yarn/npm and use a
bundler like Webpack so that you can create a smaller custom build with only the
things that you need. More info on <https://uppy.io/docs/#With-a-module-bundler>.
Note that the recommended way to use Uppy is to install it with yarn/npm and use
a bundler like Webpack so that you can create a smaller custom build with only
the things that you need. More info on
<https://uppy.io/docs/#With-a-module-bundler>.

## How to use this bundle

You can extract the contents of this zip to a directory, such as `./js/uppy`.

Now you can create an HTML file, for example `./upload.html`, with the following contents:
Now you can create an HTML file, for example `./upload.html`, with the following
contents:

```html
<html>
<head>
<link rel="stylesheet" href="./js/uppy/uppy.min.css">
</head>

<body>
<div class="DashboardContainer"></div>
<button class="UppyModalOpenerBtn">Upload</button>
<div class="uploaded-files">
<h5>Uploaded files:</h5>
<ol></ol>
</div>
</body>

<script type="module">
import {Uppy, Dashboard, Tus} from "./js/uppy/uppy.min.mjs"
var uppy = new Uppy({
debug : true,
autoProceed: false,
})
.use(Dashboard, {
browserBackButtonClose: false,
height : 470,
inline : false,
replaceTargetContent : true,
showProgressDetails : true,
target : '.DashboardContainer',
trigger : '.UppyModalOpenerBtn',
metaFields : [
{ id: 'name', name: 'Name', placeholder: 'file name' },
{ id: 'caption', name: 'Caption', placeholder: 'describe what the image is about' }
]
<head>
<link rel="stylesheet" href="./js/uppy/uppy.min.css" />
</head>

<body>
<div class="DashboardContainer"></div>
<button class="UppyModalOpenerBtn">Upload</button>
<div class="uploaded-files">
<h5>Uploaded files:</h5>
<ol></ol>
</div>
</body>

<script type="module">
import { Uppy, Dashboard, Tus } from './js/uppy/uppy.min.mjs'
var uppy = new Uppy({
debug: true,
autoProceed: false,
})
.use(Tus, { endpoint: 'https://tusd.tusdemo.net/files/' })
.on('upload-success', function (file, response) {
var url = response.uploadURL
var fileName = file.name
document.querySelector('.uploaded-files ol').innerHTML +=
'<li><a href="' + url + '" target="_blank">' + fileName + '</a></li>'
})
</script>
.use(Dashboard, {
browserBackButtonClose: false,
height: 470,
inline: false,
replaceTargetContent: true,
showProgressDetails: true,
target: '.DashboardContainer',
trigger: '.UppyModalOpenerBtn',
metaFields: [
{ id: 'name', name: 'Name', placeholder: 'file name' },
{
id: 'caption',
name: 'Caption',
placeholder: 'describe what the image is about',
},
],
})
.use(Tus, { endpoint: 'https://tusd.tusdemo.net/files/' })
.on('upload-success', function (file, response) {
var url = response.uploadURL
var fileName = file.name
document.querySelector('.uploaded-files ol').innerHTML +=
'<li><a href="' + url + '" target="_blank">' + fileName + '</a></li>'
})
</script>
</html>
```

Now open `upload.html` in your browser, and the Uppy Dashboard will appear.

## Next steps

In the example you built, Uppy uploads to a demo server where files will be deleted
shortly after uploading. You’ll want to target your own tusd server, S3 bucket, or Nginx/Apache server. For the latter, use the Xhr plugin: <https://uppy.io/docs/xhr-upload/> which uploads using regular multipart form posts, that you’ll existing Ruby or PHP backend will be able to make sense of, as if a `<input type="file">` had been used.
In the example you built, Uppy uploads to a demo server where files will be
deleted shortly after uploading. You’ll want to target your own tusd server, S3
bucket, or Nginx/Apache server. For the latter, use the Xhr plugin:
<https://uppy.io/docs/xhr-upload/> which uploads using regular multipart form
posts, that you’ll existing Ruby or PHP backend will be able to make sense of,
as if a `<input type="file">` had been used.

The Dashboard now opens when clicking the button, but you can also draw it inline into the page. This, and many more configuration options can be found here: <https://uppy.io/docs/dashboard/>.
The Dashboard now opens when clicking the button, but you can also draw it
inline into the page. This, and many more configuration options can be found
here: <https://uppy.io/docs/dashboard/>.

Uppy has many more Plugins besides Xhr and the Dashboard. For example, you can enable Webcam, Instagram, or video encoding support. For a full list of Plugins check here: <https://uppy.io/docs/plugins/>.
Uppy has many more Plugins besides Xhr and the Dashboard. For example, you can
enable Webcam, Instagram, or video encoding support. For a full list of Plugins
check here: <https://uppy.io/docs/plugins/>.

Note that for some Plugins, you will need to run a server side component called: Companion. Those plugins are marked with a (c) symbol. Alternatively, you can sign up for a free Transloadit account. Transloadit runs Companion for you, tusd servers to handle resumable file uploads, and can post-process files to scan for viruses, recognize faces, etc. Check: <https://transloadit.com>.
Note that for some Plugins, you will need to run a server side component called:
Companion. Those plugins are marked with a (c) symbol. Alternatively, you can
sign up for a free Transloadit account. Transloadit runs Companion for you, tusd
servers to handle resumable file uploads, and can post-process files to scan for
viruses, recognize faces, etc. Check: <https://transloadit.com>.

## Getting help

Stuck with anything? We’re welcoming all your questions and feedback over at <https://community.transloadit.com/c/uppy/5>.
Stuck with anything? We’re welcoming all your questions and feedback over at
<https://community.transloadit.com/c/uppy/5>.
Loading

0 comments on commit 9d8fb57

Please sign in to comment.