Features

• Drag & drop — animated drop zone with visual feedback, plus paste from clipboard
• Multiple sources — device, URL import, webcam, screen capture, and 7 cloud providers (Google Drive, Dropbox, OneDrive, Box, Instagram, Facebook, Unsplash)
• Concurrent uploads — configurable concurrency with retry and exponential backoff
• Real-time progress — per-file and aggregate progress with speed and ETA
• File restrictions — type, size, and count limits with clear rejection reasons
• Modal or inline — use as a modal overlay or embed directly in your page, with configurable header buttons (close, back, or none) for wizard and step flows
• Fully themeable — CSS custom properties with --sfx-up-* prefix
• React wrapper — controlled open prop and imperative ref via @scaleflex/uploader/react
• Lit 3 — lightweight Web Component with Shadow DOM encapsulation
• ESM + CJS — dual build, tree-shakeable, TypeScript declarations included

Installation

npm install @scaleflex/uploader

Quick start

Web Component

<script type="module">
  import '@scaleflex/uploader/define';

  const uploader = document.querySelector('sfx-uploader');
  uploader.config = {
    auth: {
      mode: 'security-template',
      container: 'YOUR_CONTAINER',
      securityTemplateId: 'SECU_...',
    },
  };
  uploader.open();
</script>

<sfx-uploader></sfx-uploader>

React

import { useState } from 'react';
import { Uploader } from '@scaleflex/uploader/react';

function App() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Upload files</button>
      <Uploader
        open={open}
        config={{
          auth: {
            mode: 'security-template',
            container: 'YOUR_CONTAINER',
            securityTemplateId: 'SECU_...',
          },
        }}
        onClose={() => setOpen(false)}
        onAllComplete={(ok, failed) => console.log('Done', ok, failed)}
      />
    </>
  );
}

Package exports

| Specifier | Description | |---|---| | @scaleflex/uploader | Core SfxUploader class (use with customElements.define) | | @scaleflex/uploader/define | Auto-registers <sfx-uploader> — import for side-effect | | @scaleflex/uploader/react | React wrapper component |

Browser support

| Browser | Version | |---|---| | Chrome / Edge | 90+ | | Firefox | 100+ | | Safari | 15.4+ |

Documentation

See the full documentation and interactive examples at scaleflex.github.io/uploader.

License

See LICENSE.