Getting Started

Overview

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

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

Here’s the simplest example html page with SME Uploader (it uses a CDN bundle, while we recommend to use a bundler, see Installation):

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>SME Uploader</title>
    <link href="https://unpkg.com/sme-uploader@1.0.6/dist/sme-uploader.min.css" rel="stylesheet">
  </head>
  <body>
    <div id="drag-drop-area"></div>

    <script src="https://unpkg.com/sme-uploader@1.0.6/dist/sme-uploader.min.js"></script>
    <script>
      const uploader = SmeUploader.Core()
        .use(SmeUploader.Dashboard, {
          inline: true,
          target: '#drag-drop-area'
        })
        .use(SmeUploader.Tus, {endpoint: 'https://master.tus.io/files/'}) // use your tus endpoint here

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

Try it live

Drag and drop, webcam, basic file manipulation (adding metadata), uploading via tus-resumable uploads or XHR/Multipart is all possible using just the SME Uploader client module.

Adding Companion to the mix enables remote sources such as Instagram, Google Drive, Dropbox, and remote URLs. Uploads from remote sources are handled server-to-server, so a 5 GB video won’t be eating into your mobile data plan. Files are removed from Companion after an upload is complete, or after a reasonable timeout. Access tokens also don’t stick around for long, for security reasons.

Installation

SME Uploader can be used with a module bundler such as Parcel, Webpack, Browserify or by including it in a script tag.

With a module bundler

Install the @sme-uploader/core package from npm:

$ npm install @sme-uploader/core

And install the plugins you need separately. The documentation pages for plugins in the sidebar show the necessary npm install commands. You can then import SME Uploader like so:

npm install @sme-uploader/core @sme-uploader/dashboard @sme-uploader/tus

...
<div id="sme-uploader"></div>
...

// Import the plugins
const SmeUploader = require('@sme-uploader/core')
const Dashboard = require('@sme-uploader/dashboard')
const Tus = require('@sme-uploader/tus')

// And their styles (for UI plugins)
// With webpack and `style-loader`, you can require them like this:
require('@sme-uploader/core/dist/style.css')
require('@sme-uploader/dashboard/dist/style.css')

const uploader = new SmeUploader()
  .use(Dashboard, {
    trigger: '#sme-uploader'
  })
  .use(Tus, {
    endpoint: 'http://18.213.229.220:1080/files/', // use your tus endpoint here
    resume: true,
    retryDelays: [0, 1000, 3000, 5000]
  })

uploader.on('complete', (result) => {
  console.log('Upload complete! We’ve uploaded these files:', result.successful)
})

Many plugins include a CSS file for the necessary styles in their dist/ folder. The plugin documentation pages will tell you which to use and when. When using multiple plugin CSS files, some code is duplicated. A CSS minifier like clean-css is recommended to remove the duplicate selectors.

You can also use the combined sme-uploader package, which includes all plugins that are maintained by the SME Uploader team.

$ npm install sme-uploader

Then you can import SME Uploader and plugins like so:

import SmeUploader, { XHRUpload, DragDrop } from 'sme-uploader'

And add the sme-uploader/dist/sme-uploader.min.css file to your page.

Connect your styles

Documentation in development

With a script tag

You can also use a pre-built bundle from CDN. SmeUploader will attach itself to the global window.SmeUploader object.

⚠️ The bundle consists of all plugins maintained by the SME Uploader team. This method is therefore not recommended for production, as your users will have to download all plugins, even if you are only using a few of them.

1. Add a script at the bottom of the closing </body> tag:

<script src="https://unpkg.com/sme-uploader@1.0.6/dist/sme-uploader.min.js"></script>

2. Add CSS to <head>:

<link href="https://unpkg.com/sme-uploader@1.0.6/dist/sme-uploader.min.css" rel="stylesheet">

3. Initialize at the bottom of the closing </body> tag:

<script>
  const uploader = SmeUploader.Core()
  uploader.use(SmeUploader.DragDrop, { target: '#drag-drop-area' })
  uploader.use(SmeUploader.Tus, { endpoint: 'https://master.tus.io/files/' })
</script>

Documentation

SME Uploader — full list of options, methods and events.
Plugins — list of SME Uploader plugins and their options.
Server — setting up and running a Companion instance, which adds support for Instagram, Dropbox, Google Drive, direct links, and other remote sources.
Writing Plugins — how to write a plugin for SME Uploader.

Browser Support

We aim to support recent versions of Chrome, Firefox, Safari, Opera and Edge.

Docs

UI Elements

Sources

Destinations

File Processing

Miscellaneous

Contributing