@scaleflex/uploader

Framework-agnostic file upload Web Component for Scaleflex VXP.
Drag & drop, URL, webcam, screen capture, and cloud providers — in a single HTML tag.

Live Demo | Documentation | Examples | CDN | npm | Scaleflex

---

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

Or use the CDN for a no-bundler setup:

https://cdn.scaleflex.com/uploader/0.2.7/sfx-uploader.min.js

<script src="https://cdn.scaleflex.com/uploader/0.2.7/sfx-uploader.min.js"></script>

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+

Claude Code Integration

If you use Claude Code, this package ships with a ready-made skill that helps Claude add the uploader to your project — detecting your framework, wiring auth, events, theming, and restrictions automatically.

Per-project (recommended — share with your team via version control):

mkdir -p .claude/skills/integrate-uploader
cp node_modules/@scaleflex/uploader/.claude/skills/integrate-uploader/SKILL.md \
   .claude/skills/integrate-uploader/SKILL.md

Commit the .claude/skills/ directory to version control. The skill is now available to everyone on the team.

Per-user (available across all your projects):

mkdir -p ~/.claude/skills/integrate-uploader
cp node_modules/@scaleflex/uploader/.claude/skills/integrate-uploader/SKILL.md \
   ~/.claude/skills/integrate-uploader/SKILL.md

Then type /integrate-uploader in Claude Code and it will walk you through the full integration — install, config, events, and theming — tailored to your stack (React, Vue, vanilla JS, etc.).

Documentation

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

License

See LICENSE.