Scaleflex Media Asset Widget

Complete Digital Asset Management Solution Upload, browse, organize, and deliver digital assets with enterprise-grade performance.
Built for modern web applications with drag & drop, image editing, and AI-powered features.
Visit scaleflex.com to learn more about the Visual Experience Platform and its powerful DAM module for digital teams and developers
Try at CodeSandbox Learn More

Asset Picker Mode

Select and export assets from your media library. Perfect for content editors, e-commerce platforms, and any application requiring asset selection.

Live Demo

Selected Files Preview

Sandbox

Edit config and apply to the Asset Picker demo

Implementation

NPM Imports (Step 1)
import ScaleflexWidget from '@scaleflex/widget-core';
import Explorer from '@scaleflex/widget-explorer';
import XHRUpload from '@scaleflex/widget-xhr-upload';
import ExploreView from '@scaleflex/widget-explorer/lib/components/ExploreView';

// Plugins CSS imports
import "@scaleflex/widget-core/dist/style.min.css";
import "@scaleflex/widget-explorer/dist/style.min.css";
CDN Usage (Step 1 alternative)
// Include in HTML head with the proper URL
<script src="https://cdn.scaleflex.com/plugins/widget/v4/stable/scaleflex-widget.min.js"></script>

// Plugins CSS imports
<link rel="stylesheet" type="text/css" href="https://cdn.scaleflex.com/plugins/widget/v4/stable/scaleflex-widget.min.css" />

// Use window.ScaleflexWidget, window.ScaleflexWidget.Core, window.ScaleflexWidget.Explorer, window.ScaleflexWidget.Explorer.ExploreViewComponent, window.ScaleflexWidget.GoogleDrive, window.ScaleflexWidget.XHRUpload, etc.
Setup - Current sandbox config - (Step 2)
Show More

Upload widget

Advanced file upload with progress tracking, drag & drop, and multiple upload sources. Supports cloud storage integration and file processing.

Live Demo

Uploaded Files Preview

Sandbox

Edit config and apply to the uploader demo

Implementation

NPM Imports (Step 1)
import ScaleflexWidget from '@scaleflex/widget-core';
import Explorer from '@scaleflex/widget-explorer';
import XHRUpload from '@scaleflex/widget-xhr-upload';
import ImageEditor from '@scaleflex/widget-image-editor';
import Webcam from '@scaleflex/widget-webcam';
import Url from '@scaleflex/widget-url';
import GoogleDrive from '@scaleflex/widget-google-drive';
import Dropbox from '@scaleflex/widget-dropbox';
import OneDrive from '@scaleflex/widget-onedrive';
import Unsplash from '@scaleflex/widget-unsplash';
import Facebook from '@scaleflex/widget-facebook';
import ScreenCapture from '@scaleflex/widget-screen-capture';
import Pixaforge from '@scaleflex/widget-pixaforge';
import Canva from '@scaleflex/widget-canva';
import ProgressPanel from '@scaleflex/widget-progress-panel';

// Plugins CSS imports
import "@scaleflex/widget-core/dist/style.min.css";
import "@scaleflex/widget-explorer/dist/style.min.css";
import "@scaleflex/widget-image-editor/dist/style.min.css";
import "@scaleflex/widget-webcam/dist/style.min.css";
import "@scaleflex/widget-screen-capture/dist/style.min.css";
import "@scaleflex/widget-pixaforge/dist/style.min.css";
CDN Usage (Step 1 alternative)
// Include in HTML head with the proper URL
  <script src="https://cdn.scaleflex.com/plugins/widget/v4/stable/scaleflex-widget.min.js"></script>
  
  // Plugins CSS imports
  <link rel="stylesheet" type="text/css" href="https://cdn.scaleflex.com/plugins/widget/v4/stable/scaleflex-widget.min.css" />
  
  // Use window.ScaleflexWidget, window.ScaleflexWidget.Core, window.ScaleflexWidget.Explorer, window.ScaleflexWidget.Explorer.ExploreViewComponent, window.ScaleflexWidget.GoogleDrive, window.ScaleflexWidget.XHRUpload, etc.
Setup - Current sandbox config - (Step 2)
Show More

Upload Zone

Simple drag & drop upload zone without additional plugins. Ideal for basic file upload requirements with minimal configuration.

Live Demo

Uploaded Files Preview

Sandbox

Edit config and apply to the Basic Upload demo

Implementation

NPM Imports (Step 1)
import ScaleflexWidget from '@scaleflex/widget-core';
import Explorer from '@scaleflex/widget-explorer';
import XHRUpload from '@scaleflex/widget-xhr-upload';

// Plugins CSS imports
import "@scaleflex/widget-core/dist/style.min.css";
import "@scaleflex/widget-explorer/dist/style.min.css";
CDN Usage (Step 1 alternative)
// Include in HTML head with the proper URL
<script src="https://cdn.scaleflex.com/plugins/widget/v4/stable/scaleflex-widget.min.js"></script>

// Plugins CSS imports
<link rel="stylesheet" type="text/css" href="https://cdn.scaleflex.com/plugins/widget/v4/stable/scaleflex-widget.min.css" />

// Use window.ScaleflexWidget, window.ScaleflexWidget.Core, window.ScaleflexWidget.Explorer, window.ScaleflexWidget.Explorer.ExploreViewComponent, window.ScaleflexWidget.GoogleDrive, window.ScaleflexWidget.XHRUpload, etc.
Setup - Current sandbox config - (Step 2)
Show More