Build lightweight uppy js file

Uppy
1

Hi, I am looking to build a lightweight version because the default minimized one is 500KB which is too much.

I need it to have the following dependencies
uppy/core
uppy/drag-drop
uppy/tus
uppy/locales/lib/it_IT

How can I achieve that on pure JS and not node?

2

Hi, for a lightweight bundle there is no way around using npm to install the packages.

3

do you have the exact code to place in webpack js?
because with mine it generates a bundle.js which does not work with my uppy initialization code.

4

Webpack config’s are specific to your needs I don’t know about. These days, I recommend not writing a webpack config yourself and using a framework which includes it.

Using Uppy packages is no different from any other npm package: install it with your package manager of choice and import it.

5

You can checkout the example on the Uppy repo: https://github.com/transloadit/uppy/tree/main/examples/bundled
This uses Parcel to generate the bundle, you can copy the configuration from there.

If you are already using Webpack and are trying to integrate Uppy within your project, you shouldn’t need any particular setting (unless you are using an old version of Webpack, compatibility is not guaranteed)

6

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...