Skip to the content.

Creating a new widget

There are some widgets that are created for you to get started with:

There are two modes a widget should be able to display:

  1. Preview mode:
    • In this mode you have to display a small component which will be displayed along with the card in the files view.
    • This component can be clicked to get the full preview.

This is how your component will look like in the preview mode:

Preview Mode

  1. Full Mode:
    • This mode should ideally be loaded into a modal using the React.createPortal() and passing in modal-root as the element id.

This is how your component will look like in the Full mode:

Full Mode

This should ideally create a full screen widget, but you can choose to overlay over the content if you wish to do so. Rclone can control the opening and closing of the modal.

You may copy this template to create your own Widget.

import React, {useState} from "react";
import {Button, Modal} from "reactstrap";
import * as ReactDOM from "react-dom";
import {MODAL_ROOT_ELEMENT} from "../../utils/Constants";
import * as PropTypes from "prop-types";
import ErrorBoundary from "../../ErrorHandling/ErrorBoundary";

function MyWidget({playbackURL, MimeType}) {

    const [preview, setPreview] = useState(true);

    function hideFull(e) {


    let element;
    if (preview) {
        element = (
            //  Render element in preview mode. 
    } else {

        // Load the video

        element = ReactDOM.createPortal((
            //  Render element in full modal mode.
        ), document.getElementById(MODAL_ROOT_ELEMENT));

    return (


VideoPlayer.propTypes = {
    // Define PropTypes supplied here.
    playbackURL: PropTypes.string.isRequired,
    MimeType: PropTypes.string.isRequired

export default VideoPlayer;

In MediaWidget.js add the component:

Eg: You can replace the parameters as required. The following parameters are available to be passed:

  1. fsInfo - Gives information about the underlying remote config and capabilities.
  2. Downloadable URL: downloadURL
  3. Item details of the current file (as provided by rclone).
  4. IP_Address
  5. MimeType
  6. InViewPort: Boolean. Denotes if the item is currently visible in the viewport.

Edit and add the following line to the MediaWidget.js Handle your own MimeType eg video/mp4, image/jpeg

case "video/mp4":
    return (<VideoPlayer playbackURL={downloadURL} MimeType={MimeType} currentPath={currentPath}/>);