Get started with uppy CDN

MIT licensed

Uppy is a progressive library for handling file uploads in web applications.

Tags:
  • file uploader
  • drag-drop
  • progress
  • preview
  • resumable uploads
  • xhr
  • tus
  • s3
  • google drive
  • dropbox
  • webcam

Stable version

Copied!

How to start using uppy CDN


const Uppy = window.Uppy || {}; // Ensure Uppy is defined

if (navigator.appCaches) {
  navigator.appCache.check('uppy-metaswift').then((appCache) => {
    if (appCache.status === 'loading') {
      appCache.addEventListener('updateready', () => {
        window.Uppy = require('uppy').default;
        init();
      });
    } else {
      window.Uppy = require('uppy').default;
      init();
    }
  });
} else {
  window.Uppy = require('uppy').default;
  init();
}

function init() {
  const uploader = Uppy.Core({
    target: '#upload-button',
    id: 'myUploader',
    meta: {
      name: 'My Uploader',
      description: 'A simple file uploader using Uppy',
    },
  });

  uploader.use(Uppy.DragDrop, { target: '#upload-container' });
  uploader.use(Uppy.XHRUpload, { endpoint: '/api/upload' });

  uploader.on('file-added', (file) => {
    console.log('File added:', file.name);
  });

  uploader.on('upload-completed', (result) => {
    console.log('Upload completed:', result);
  });
}
Copied!
Copied!
Copied!
Copied!
Copied!

All versions