How to install Uppy

Created Mar 29, 2021 at 17:15

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.

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

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

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]

yarn add [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>