File Storage
Get started
Docs menu

Introduction

Static reference for the File Storage SDK - install the bundle, embed with mount(), and connect your API or S3 proxy.

Choose your path

Pick the option that best describes your project to jump to the right guide.

In your web app React, Vue, Angular, or a plain script tag. ReactVueAngularHTML CMS or admin media library Back it with your own API using the HTTP contract or a custom FileStore. HTTPFileStore Your own S3 bucket Run the reference Node.js proxy so AWS keys never reach the browser. S3R2Spaces Managed storage No backend. Mount with your API key and we host the files. No backend Rich-text editor plugin Soon TinyMCE, CKEditor, and Froala plugins. Tell us which you need. TinyMCECKEditorFroala Drupal or Joomla Soon Native CMS modules are in progress. DrupalJoomla

Overview

The SDK ships as file-storage.min.js (IIFE) and file-storage.css after yarn build (or npm run build) in the parent project. Your backend implements the same HTTP contract as the included example S3 proxy, or you mount with a custom FileStore.

You will learn

Install & build

  1. Open the File Manager repository root.
  2. Run yarn (or npm install).
  3. Run yarn build to produce files under dist/: file-storage.min.js, file-storage.es.js, file-storage.css.
  4. Host the JS + CSS on your CDN or app server.
# Local demo (proxy + UI)
yarn dev

# Marketing site
yarn marketing:dev   # http://localhost:3001

Embed

Load styles and script, then call FileStorageSDK.mount with your store configuration: 

<link rel="stylesheet" href="/file-storage.css" />
<div id="fm" style="height: 70vh"></div>
<script src="/file-storage.min.js"></script>
<script>
  FileStorageSDK.mount({
    el: '#fm',
    apiKey: 'fs_live_…',
    s3: {
      proxyBaseUrl: 'https://api.example.com/fm',
      publicObjectBaseUrl: 'https://cdn.example.com',
    },
  })
</script>

mount() returns { unmount } - call unmount() when leaving the route. Full options and HTTP store examples are in the integration guide.

Configuration

Non-secret UI defaults (brand name, theme colors, logos, feature toggles) live in src/config/editableOptions.ts in the SDK repo. Demo-only connection settings use DEMO_* environment variables.

Restart Vite after editing editable options. Production embeds do not use that file unless you rebuild the bundle with customized defaults - prefer passing theme and store options at mount time.

S3 proxy

The example-server/ package provides a reference Node proxy. From the repo root, yarn dev starts the proxy (default port 3847) and the Vite UI together.

Routes include POST /list, /upload, /folder, /rename, /move, /remove, /search, and optional /listByType. Never expose AWS secret keys to the browser - only the proxy uses them.

Environment variables

Copy env.example to .env in the project root.

Block Consumer
AWS_*, S3_*, PORT, Rekognition example-server only (server-side)
DEMO_* Vite demo - inlined into the browser bundle 
DEMO_STORE=s3
DEMO_S3_PROXY_BASE_URL=http://localhost:3847
DEMO_S3_PUBLIC_BASE_URL=https://your-bucket.s3.us-east-2.amazonaws.com
DEMO_FM_MAX_CONCURRENT_FETCHES=30

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-2
AWS_BUCKET=
PORT=3847

Next steps

  • Integration guide - architecture, contracts, Vue/React snippets, CORS & auth
  • Demo - run the live UI locally
  • Pricing - Playground free · Starter $9 · Pro $14 · Managed usage