I used Parcel to package the dependencies I needed. Here’s how I did it (from what I remember):
- install Uppy and other dependencies with npm/yarn
- create a main.js file to include everything that I need (see below)
- add parcel config to package.json (see below)
- build with Parcel
yarn build
- in the dist file, change the imports for “process” and “buffer” to declarations (they fail to import in the browser but need to be declared otherwise an error is thrown. I’m pretty sure there’s a better way to do this but it’s working for the time being…)
- import the dist file wherever you need it (see below)
The main reason I built my own distributable was so I could apply a patch to Uppy to handle some extra data I’m passing back from Companion. I left the patch step in the package.json below but you can remove it.
Hopefully this was clear enough to help to some degree!
/**
* main.js
*
* This file contains the features of Uppy that is required.
*
* It's used to build a module that can be imported by us in the browser.
*/
import Uppy from '@uppy/core';
// ui stuff
import Dashboard from '@uppy/dashboard'
import DragDrop from '@uppy/drag-drop'
import StatusBar from '@uppy/status-bar'
import DropTarget from '@uppy/drop-target'
// uploaders
import AwsS3 from '@uppy/aws-s3'
// providers
import Box from '@uppy/box'
import Dropbox from '@uppy/dropbox'
import GoogleDrive from '@uppy/google-drive'
import OneDrive from '@uppy/onedrive'
import Url from '@uppy/url'
export default {
Uppy,
Dashboard,
DragDrop,
StatusBar,
DropTarget,
AwsS3,
Box,
Dropbox,
GoogleDrive,
OneDrive,
Url
}
{
"name": "adv-uppy",
"version": "1.0.0",
"license": "UNLICENSED",
"dependencies": {
"@uppy/aws-s3": "3.1.1",
"@uppy/box": "2.1.1",
"@uppy/core": "3.2.0",
"@uppy/dashboard": "3.4.0",
"@uppy/drag-drop": "3.0.2",
"@uppy/drop-target": "2.0.1",
"@uppy/dropbox": "3.1.1",
"@uppy/google-drive": "3.1.1",
"@uppy/onedrive": "3.1.1",
"@uppy/progress-bar": "3.0.2",
"@uppy/status-bar": "3.1.2",
"@uppy/url": "3.3.1"
},
"scripts": {
"build": "yarn patch && parcel build; echo REMOVE PROCESS AND BUFFER IMPORTS FROM DIST FILE",
"patch": "cd node_modules; patch -p1 --forward < ../patch; cd -"
},
"source": "main.js",
"browser": "dist/uppy.js",
"targets": {
"browser": {
"context": "browser",
"outputFormat": "esmodule",
"includeNodeModules": {},
"optimize": false
}
},
"@parcel/resolver-default": {
"packageExports": true
},
"devDependencies": {
"parcel": "^2.9.2"
}
}
import Uppy from '../../../../serve/vendor/uppy/dist/uppy.js'
const uppy = new Uppy.Uppy({
restrictions: {
maxFileSize: 50000000,
allowedFileTypes: [
'.jpeg',
'.jpg',
'.png',
'.gif',
'.avi',
'.mov',
'.mp3',
'.mp4',
'.mpeg',
'.mpeg4',
'.mpg',
'.wav',
'.pdf',
'.js',
'.flv',
'.ogg',
'.webm',
'.h264',
'.ogv',
'.svg',
],
},
})
const companionUrl = `${location.origin}/companion`
uppy.use(Uppy.AwsS3, {
limit: 2,
companionUrl,
allowedMetaFields: ['uuid', 'account_id'], // only pass these form params to endpoint
})
// and so on...