mirror of
https://github.com/transloadit/uppy.git
synced 2026-01-23 02:25:07 +00:00
9d087791dc
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @uppy/golden-retriever@5.2.1 ### Patch Changes -d766c30: Fix: Don't restore `currentUploads` if no files are being restored. - Updated dependencies [648f245] - @uppy/utils@7.1.5 ## @uppy/google-drive-picker@1.1.1 ### Patch Changes -50e2420: Improve Google Drive Picker folder picking: Resolve also folders inside shared drives (but not symlinks to folders) - Updated dependencies [648f245] - Updated dependencies [50e2420] - @uppy/utils@7.1.5 - @uppy/provider-views@5.2.2 ## @uppy/provider-views@5.2.2 ### Patch Changes -50e2420: Improve Google Drive Picker folder picking: Resolve also folders inside shared drives (but not symlinks to folders) - Updated dependencies [648f245] - @uppy/utils@7.1.5 ## @uppy/utils@7.1.5 ### Patch Changes -648f245: Fix `complete` event never firing for XHR and make sure the fetch aborts immediately if Uppy is cancelled before the fetch starts. ## @uppy/xhr-upload@5.1.1 ### Patch Changes -648f245: Fix `complete` event never firing for XHR and make sure the fetch aborts immediately if Uppy is cancelled before the fetch starts. - Updated dependencies [648f245] - @uppy/utils@7.1.5 ## uppy@5.2.1 ### Patch Changes - Updated dependencies [648f245] - Updated dependencies [50e2420] - Updated dependencies [d766c30] - @uppy/xhr-upload@5.1.1 - @uppy/google-drive-picker@1.1.1 - @uppy/provider-views@5.2.2 - @uppy/golden-retriever@5.2.1 Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
96 lines
3.3 KiB
Markdown
96 lines
3.3 KiB
Markdown
# Uppy
|
||
|
||
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/v5.2.1/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>.
|
||
|
||
## 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:
|
||
|
||
```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',
|
||
},
|
||
],
|
||
})
|
||
.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.
|
||
|
||
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. 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>.
|