How to install Uppy

Created

Uppy is a sleek and modular file uploader. It fetches files from local disk, Google Drive, Instagram, remote urls, cameras etc, and then uploads them to the final destination. It’s fast, easy to use and lets you worry about more important problems than building a file uploader.

Uppy consists of a core module and various plugins for selecting, manipulating and uploading files.

Installation

You can download the latest version of Uppy from the GitHub releases or use a Uppy CDN.

Cloning a repository

You can clone a repository from GitHub.com to your local computer.
Cloning with HTTPS URLs
git clone https://github.com/transloadit/uppy.git
Cloning with SSH URLs
git clone [email protected]:transloadit/uppy.git
Cloning with GitHub CLI
gh repo clone transloadit/uppy

Install via NPM package

Run the following command to locally install the package and its dependencies with NPM.
Downloading and installing packages locally
npm i uppy
npm install uppy
yarn add uppy
Downloading and installing packages globally
npm i -g uppy
yarn global add uppy
Install Specific Version of a Package
npm install [email protected]
Bower
bower install uppy

Example

uses a CDN bundle


<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Uppy</title>
    <link href="https://releases.transloadit.com/uppy/v1.26.1/uppy.min.css" rel="stylesheet">
  </head>
  <body>
    <div id="drag-drop-area"></div>

    <script src="https://releases.transloadit.com/uppy/v1.26.1/uppy.min.js"></script>
    <script>
      var uppy = Uppy.Core()
        .use(Uppy.Dashboard, {
          inline: true,
          target: '#drag-drop-area'
        })
        .use(Uppy.Tus, {endpoint: 'https://tusd.tusdemo.net/files/'})

      uppy.on('complete', (result) => {
        console.log('Upload complete! We’ve uploaded these files:', result.successful)
      })
    </script>
  </body>
</html>