Uppy Custom Plugin -- Assets

Uppy
1

Hello Developers,

I am trying to add a custom plugin in Uppy Dashboard. My New plugin name is Assets. I want to call a function on click of my custom plugin. Currently, when I am trying to click on a new plugin than I am getting the below error,

Unhandled Rejection (TypeError): Cannot add property __, object is not extensible

:arrow_forward: 27 stack frames were collapsed.

This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error. Click the ‘X’ or hit ESC to dismiss this message.

I am using React JS.

My App.js component code:

// Topic: Uppy Custom Plugin Integration in React J.S
// Date: 21st September 2021
// Developer: Shubham Singh
// File Description: App.js is a functional component which used for Uppy Custom Plugin Integration.
// ------------------------------------------ START ------------------------------------------------

// Required Dependencies
// ======================

import "./App.css";

// React Dependencies
import React, { useEffect, useMemo } from "react";

// Uppy Dependencies
import { Dashboard } from "@uppy/react";
import Uppy from "@uppy/core";
import Webcam from "@uppy/webcam";
import GoogleDrive from "@uppy/google-drive";
import Dropbox from "@uppy/dropbox";
import Box from "@uppy/box";
import Instagram from "@uppy/instagram";
import Facebook from "@uppy/facebook";
import OneDrive from "@uppy/onedrive";
import ScreenCapture from "@uppy/screen-capture";
import ImageEditor from "@uppy/image-editor";

// import Tus from "@uppy/tus";
// import Url from "@uppy/url";
// import DropTarget from "@uppy/drop-target";
// import GoldenRetriever from "@uppy/golden-retriever";

// Uppy CSS Dependencies
import "@uppy/core/dist/style.css";
import "@uppy/dashboard/dist/style.css";

// Custom Uppy Plugin Dependency
import UppyAssetPlugin from "./components/UppyAssetPlugin/UppyAssetPlugin";
// -------------------------------------------------------------------------------

function App(props) {
  const uppy = useMemo(() => {
    return (
      //New Uppy Instance Created
      new Uppy({
        debug: true,
        autoProceed: false,
        restrictions: {
          maxFileSize: 1000000,
          maxNumberOfFiles: 3,
          minNumberOfFiles: 2,
          allowedFileTypes: ["image/*", "video/*"],
          requiredMetaFields: ["caption"],
        },
      })
        .use(Webcam, { id: "MyWebcam" })
        .use(GoogleDrive, {
          companionUrl: "https://companion.uppy.io",
          id: "GoogleDrive",
        })
        .use(Dropbox, {
          companionUrl: "https://companion.uppy.io",
          id: "Dropbox",
        })
        .use(Box, {
          companionUrl: "https://companion.uppy.io",
          id: "Box",
        })
        .use(Instagram, {
          companionUrl: "https://companion.uppy.io",
          id: "Instagram",
        })
        .use(Facebook, {
          companionUrl: "https://companion.uppy.io",
          id: "Facebook",
        })
        .use(OneDrive, {
          companionUrl: "https://companion.uppy.io",
          id: "OneDrive",
        })
        .use(ScreenCapture, {
          id: "ScreenCapture",
        })
        .use(ImageEditor, {
          id: "ImageEditor",
        })

        // .use(Tus, {
        //   endpoint: "https://tusd.tusdemo.net/files/",
        // })
        // .use(DropTarget, { target: document.body })
        // .use(GoldenRetriever)

        .use(UppyAssetPlugin, {
          id: "Assets",
        })
    );
  }, []).on("complete", (result) => {
    console.log(
      "Upload complete! We’ve uploaded these files:",
      result.successful
    );
  });

  // This useEffect hook used here to remove uppy or close the uppy.
  useEffect(() => {
    console.log(props);
    return () => uppy.close();
  });

  return (
    <div className="App">
      <h3 style={{ textAlign: "center", color: "green" }}>
        Uppy Custom Plugin Integration in React J.S
      </h3>

      <Dashboard
        uppy={uppy}
        plugins={[
          "Webcam",
          "GoogleDrive",
          "Dropbox",
          "Box",
          "Instagram",
          "Facebook",
          "OneDrive",
          "ScreenCapture",
          "ImageEditor",

          // "Tus",
          // "DropTarget",
          // "GoldenRetriever",

          "Assets",
        ]}
        {...props}
      />
    </div>
  );
}

export default App;

// ************************************************* THE END ********************************************

My Custom Plugin Component code UppyAssetPlugin.js

// Topic: Uppy Custom Plugin Integration in React J.S
// Date: 21st September 2021
// Developer: Shubham Singh
// File Description: UppyAssetPlugin.js is a class component which is used for Uppy Custom Plugin Integration.
// ------------------------------------------ START ----------------------------------------------------------

// Required Dependencies
// ======================

import "./UppyAssetPlugin.css";

// Uppy Dependencies
import { UIPlugin } from "@uppy/core";

// -------------------------------------------------------------------------------

class UppyAssetPlugin extends UIPlugin {
  constructor(uppy, opts) {
    super(uppy, opts);
    this.id = this.opts.id || "UppyAssetPlugin";
    this.type = "acquirer";
  }

  handlePlugin() {
    console.log("Shubham Singh");
  }

  // install() {
  //   this.uppy.addPreProcessor("logo-click", this.handlePlugin);
  // }

  // uninstall() {
  //   this.uppy.off("logo-removed", this.handlePlugin);
  // }

  render() {
    return <div id="custom-plugin">Assets</div>;
  }
}

export default UppyAssetPlugin;

// ************************************************* THE END ********************************************

Please help me how I call the function on click of assets icon.