Filerobot Media Asset Widget (FMAW)

This package contains only the main/global readme for the widget.

The FMAW is a file uploader and media gallery in one easy-to-integrate modal or inline widget. It is the storefront of the Filerobot DAM (Digital Asset Management) and enables accelerated uploads through Filerobot's content ingestion network and reverse CDN.

Various plugins like for example the Filerobot Image Editor can be enabled to address use cases requiring the interaction with images, videos and static files in your web application. The modular architecture only loads relevant code, thus making the widget as lightweight as possible.

Check it live in action

• Main features:
• Installation
• Quickstart
  • Demo
  • React
  • Vanilla (plain) JS
• Modules
• Plugins
  • UI Elements
  • Sources
  • Destinations
  • Miscellaneous
• License

Main features:

• Single and multiple file upload into a Filerobot storage container (project)
• Upload via Drag & Drop or Copy & Paste
• Upload from 3rd party storages such as Google Drive, Dropbox, OneDrive, Facebook, Instagram
• Webcam and screen cast integration to upload realtime videos and screen recordings
• File explorer and media gallery with file management capabilites (folder creation, file move, rename, ...)
• Zipped download of multiple files
• File versioning with history, version browsing
• File and media asset sharing via accelerated CDN links
• Media gallery with powerful search capabilities based on tags and customizable metadata (taxonomy)
• AI-based tagging of images
• Embedded Filerobot Image Editor for inline image editing
• Image annotator and comments for collaboration
• Image variant generator with customizable template to generate optimal sizes for social media posts (example)
• Post-upload video transcoding for delivering HLS & DASH playlists for adaptive streaming
• On-the-fly image resizing via Cloudimage

The widget can be integrated in a web page HTML element, as a pop-up modal on button click or floaty in the page.

Installation

The widget's architecture contains the Core module and various plugins. Each plugin has its own dedicated documentation.

CDN links to JS and CSS (containing all plugins)

• Add the following CSS file before the end of </head> in your HTML file

<link
  rel="stylesheet"
  type="text/css"
  href="https://cdn.scaleflex.com/plugins/filerobot-widget/v3/stable/filerobot-widget.min.css"
/>

• Add the following JS file before the end of </body> in your HTML file.

<script
  type="text/javascript"
  src="https://cdn.scaleflex.com/plugins/filerobot-widget/v3/stable/filerobot-widget.min.js"
></script>

The CDN versions of the library contains all plugins whereas npm gives you flexibility to include only plugins/modules you need to have lighter lib files. For example, you can just use the Core module and the XHR Upload plugin to integrate a simple uploader to your application, without file explorer, media gallery and image editor.

Quickstart

Demo

See the FMAW in action here.

The following implementation examples build a FMAW for uploading files, showing the Filerobot Explorer as a file explorer/media gallery, enabling the Webcam for capturing photos and videos and the Filerobot Image Editor for editing images inline.

At minima, you will need the following 3 packages to display a basic FMAW:

• Core
• Filerobot Explorer
• XHR Upload

You can obtain a container name and securityTemplateId from your Filerobot account in order for files to be uploaded in the specified Filerobot storage container (also called project in Filerobot).

React

import Filerobot from "@filerobot/core";
import Explorer from "@filerobot/explorer";
import XHRUpload from "@filerobot/xhr-upload";
import ImageEditor from "@filerobot/image-editor";
import Webcam from "@filerobot/webcam";

import "@filerobot/core/dist/style.min.css";
import "@filerobot/explorer/dist/style.min.css";
import "@filerobot/image-editor/dist/style.min.css";
import "@filerobot/webcam/dist/style.min.css";

const App = () => {
  const filerobot = useRef(null);

  useEffect(() => {
    const demoContainer = "scaleflex-tests-v5a";
    const demoSecurityTemplateId = "......";

    filerobot.current = Filerobot({
      securityTemplateId: demoSecurityTemplateId,
      container: demoContainer,
      dev: false,
    })
      .use(Explorer, { target: "#filerobot-widget", inline: true })
      .use(XHRUpload)
      .use(ImageEditor)
      .use(Webcam);

    return () => {
      filerobot.current.close();
    };
  }, []);

  return (
    <div>
      <h1>React Example</h1>
      <div id="filerobot-widget" />
    </div>
  );
};

render(<App />, document.getElementById("app"));

Vanilla (plain) JS

<html>
  <head>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.scaleflex.com/plugins/filerobot-widget/v3/stable/filerobot-widget.min.css"
    />
  </head>
  <body>
    <div id="filerobot-widget"></div>

    <script src="https://cdn.scaleflex.com/plugins/filerobot-widget/v3/stable/filerobot-widget.min.js"></script>

    <script type="text/javascript">
      const Filerobot = window.Filerobot;
      const demoContainer = "scaleflex-tests-v5a";
      const demoSecurityTemplateId = "......";

      const filerobot = Filerobot.Core({
        securityTemplateId: demoSecurityTemplateId,
        container: demoContainer,
        dev: false, // optional, default: false
      });
      const Explorer = Filerobot.Explorer;
      const XHRUpload = Filerobot.XHRUpload;
      const ImageEditor = Filerobot.ImageEditor;
      const Webcam = Filerobot.Webcam;

      filerobot
        .use(Explorer, { target: "#filerobot-widget", inline: true })
        .use(XHRUpload)
        .use(ImageEditor)
        .use(Webcam);
    </script>
  </body>
</html>

Modules

The Filerobot Core module: Core

Plugins

UI Elements

• Filerobot Explorer: Filerobot File Explorer displaying the folder structure and media gallery and providing all file management capabilities.

  Following plugins can be added to augment the Filerobot's File Explorer capabilities:

  • Status Bar: displays upload/download status progress in a status bar.

  • Informer: displays pop-up messages/statuses related to file operations.

  • Filerobot Image Editor: inline image editor with functionalities such as filters, crop, resizing, watermark, collages, etc.... Also used by other features of the Widget such as the variant generator and export function.

  • Pre-Upload Image Processor: ability to resize a large image into the storage container before upload.

  • Filerobot Image Annotator: inline image annotation and comment feed for people to collaborate on media assets [REMOVED -- Integrated into Filerobot Explorer].

Sources

• Google Drive: import files from Google Drive.

• Dropbox: import files from Dropbox.

• Box: import files from Box.

• Instagram: import images and videos from Instagram.

• Facebook: import images and videos from Facebook.

• OneDrive: import files from Microsoft OneDrive.

• Import From URL: import direct URLs from anywhere on the web.

• Webcam: capture photos or videos from the device's camera and upload them to the Filerobot storage container.

• Screen Capture: device screen recorder.

• Attach Drag & Drop zone: Plugin for attaching drag & drop zone for some specific HTML element in your page.

• Pixaforge: Plugin for importing free images & icons from Pixaforge that contains free gallery for different categories & tags.

• Canva: Create your own design & customize it then upload it through the widget on the go by integrating this plugin inside the widget.

• Unsplash: import files from unsplash.

Destinations

• XHR Upload: handles multipart file upload.

Miscellaneous

• Thumbnail Generator: thumbnail generator for different files to be used as file preview.

License

The Filerobot Media Asset Widget (FMAW) is provided under the MIT License