mirror of
https://github.com/transloadit/uppy.git
synced 2026-01-23 02:25:07 +00:00
e290a176e7
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/transloadit@5.5.0 ### Minor Changes -efda84c: Migrate from 'transloadit' to '@transloadit/types' to get the types. No need to drag in the entire SDK. ### Patch Changes - Updated dependencies [54a46db] - @uppy/tus@5.1.1 ## @uppy/components@1.1.1 ### Patch Changes -fa23832: - Fix Vue components to work with kebab-case props (`:edit-file` instead of `:editFile`) ## @uppy/locales@5.1.1 ### Patch Changes -642c75d: Update cs_CZ dropPaste keys to use the correct variables. ## @uppy/tus@5.1.1 ### Patch Changes -54a46db: Fix Node.js support by conditionally setting a property which does not exist in Node.js instead of crashing. ## @uppy/vue@3.1.1 ### Patch Changes -fa23832: - Fix Vue components to work with kebab-case props (`:edit-file` instead of `:editFile`) - Updated dependencies [fa23832] - @uppy/components@1.1.1 ## uppy@5.2.3 ### Patch Changes - Updated dependencies [642c75d] - Updated dependencies [54a46db] - Updated dependencies [efda84c] - @uppy/locales@5.1.1 - @uppy/tus@5.1.1 - @uppy/transloadit@5.5.0 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.3/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>.
|