Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

example: migrate xhr-bundle to ESM #4012

Merged
merged 2 commits into from Aug 18, 2022
Merged

example: migrate xhr-bundle to ESM #4012

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
65d8ac1
example: migrate `xhr-bundle` to ESM
aduh95 Aug 18, 2022
f6689cd
Merge branch 'main' into xhr-bundle-esm
aduh95 Aug 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions .eslintrc.js
View file
Open in desktop
Expand Up @@ -197,6 +197,7 @@ module.exports = {
'examples/custom-provider/client/*.js',
'examples/multiple-instances/*.js',
'examples/transloadit-markdown-bin/*.js',
'examples/xhr-bundle/*.js',
'private/dev/*.js',
'private/release/*.js',
'private/remark-lint-uppy/*.js',
Expand Down
1 change: 0 additions & 1 deletion examples/xhr-bundle/.gitignore
View file
Open in desktop

This file was deleted.

12 changes: 6 additions & 6 deletions examples/xhr-bundle/readme.md → examples/xhr-bundle/README.md
View file
Open in desktop
Expand Up @@ -2,21 +2,21 @@

This example uses Uppy with XHRUpload plugin in `bundle` mode. Bundle mode uploads all files to the endpoint in a single request, instead of firing off a new request for each file. This makes uploading a bit slower, but it may be easier to handle on the server side, depending on your setup.

[serve.js](./serve.js) contains an example express.js server that receives a multipart form-data upload and responds with some information about the files that were received (name, size) as JSON. It uses [multer](https://npmjs.com/package/multer) to parse the upload stream.
[`server.cjs`](./server.cjs) contains an example express.js server that receives a multipart form-data upload and responds with some information about the files that were received (name, size) as JSON. It uses [multer](https://npmjs.com/package/multer) to parse the upload stream.

## Run it

To run this example, make sure you've correctly installed the **repository root**:

```bash
npm install
npm run build
```sh
corepack yarn install
corepack yarn build
```

That will also install the dependencies for this example.

Then, again in the **repository root**, start this example by doing:

```bash
npm run example xhr-bundle
```sh
corepack yarn workspace @uppy-example/xhr-bundle start
```
8 changes: 4 additions & 4 deletions examples/xhr-bundle/index.html
View file
Open in desktop
Expand Up @@ -4,8 +4,6 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Uppy example: XHRUpload to a single endpoint</title>
</head>
<body>
<style>
main {
display: flex;
Expand All @@ -14,14 +12,16 @@
}
h1 { text-align: center }
</style>
</head>
<body>
<main>
<div>
<h1>files[]</h1>
<div id="app"></div>
</div>
</main>

<link href="uppy.min.css" rel="stylesheet">
<script src="bundle.js"></script>
<noscript>This app requires JavaScript.</noscript>
<script src="./main.js" type="module"></script>
</body>
</html>
9 changes: 6 additions & 3 deletions examples/xhr-bundle/main.js
View file
Open in desktop
@@ -1,6 +1,9 @@
const Uppy = require('@uppy/core')
const Dashboard = require('@uppy/dashboard')
const XHRUpload = require('@uppy/xhr-upload')
import Uppy from '@uppy/core'
import Dashboard from '@uppy/dashboard'
import XHRUpload from '@uppy/xhr-upload'

import '@uppy/core/dist/style.css'
import '@uppy/dashboard/dist/style.css'

const uppy = new Uppy({
debug: true,
Expand Down
17 changes: 8 additions & 9 deletions examples/xhr-bundle/package.json
View file
Open in desktop
Expand Up @@ -2,22 +2,21 @@
"name": "@uppy-example/xhr-bundle",
"version": "0.0.0",
"dependencies": {
"@babel/core": "^7.2.2",
"@uppy/core": "workspace:*",
"@uppy/dashboard": "workspace:*",
"@uppy/xhr-upload": "workspace:*",
"babelify": "^10.0.0",
"budo": "^11.6.1",
"cors": "^2.8.5",
"express": "^4.16.4",
"multer": "^1.4.1",
"npm-run-all": "^4.1.5"
"multer": "^1.4.1"
},
"devDependencies": {
"npm-run-all": "^4.1.5",
"vite": "^3.0.0"
},
"private": true,
"scripts": {
"css": "cp ../../packages/uppy/dist/uppy.min.css .",
"start": "run-p start:*",
"start:client": "yarn run css && budo main.js:bundle.js -- -t babelify",
"start:server": "node serve.js"
"start": "run-p start:server start:client",
"start:client": "vite",
"start:server": "node server.cjs"
}
}
0 examples/xhr-bundle/serve.js → examples/xhr-bundle/server.cjs
View file
Open in desktop
File renamed without changes.
4 changes: 1 addition & 3 deletions yarn.lock
View file
Open in desktop
Expand Up @@ -8356,16 +8356,14 @@ __metadata:
version: 0.0.0-use.local
resolution: "@uppy-example/xhr-bundle@workspace:examples/xhr-bundle"
dependencies:
"@babel/core": ^7.2.2
"@uppy/core": "workspace:*"
"@uppy/dashboard": "workspace:*"
"@uppy/xhr-upload": "workspace:*"
babelify: ^10.0.0
budo: ^11.6.1
cors: ^2.8.5
express: ^4.16.4
multer: ^1.4.1
npm-run-all: ^4.1.5
vite: ^3.0.0
languageName: unknown
linkType: soft

Expand Down