Image Tool

Introduction

This action allows users to add images to the canvas by selecting a file. Once added, the image is rendered as an Image Node, ready for positioning, resizing, and collaboration.

This action supports various image formats: jpeg, gif & png. Ideal for visual references, diagrams, or creative content.

Dependencies

This action needs also registered on the Weave instance the following:

Image node

Usage

Import the Action

Start by importing the action:

import { WeaveImageToolAction } from "@inditextech/weave-sdk";

Register the Action

Then register the action on the Weave class instance.

const instance = new Weave({
  ...
  actions: [
    ...,
    new WeaveImageToolAction(), 
  ]
})

Setup the action trigger

Setup on a button or any element on the UI the user can interact with on the action event:

const { finishUploadCallback } = instance.triggerAction("imageTool");

Then select the image to upload (by showcasing a file select to the end user), and when the user selects an image, call the finishUploadCallback, passing as parameter the URL where the image can be accessed.

For example on a button on React:

import React from "react";
import { useWeave } from "@inditextech/weave-react";

const MyImageToolTriggerComponent = () => {
  const inputFileRef = React.useRef<any>(null);
  const instance = useWeave((state) => state.instance);
  const [showSelectFile, setShowSelectFile] = React.useState<boolean>(false);

  React.useEffect(() => {
    if (showSelectFile && inputFileRef.current) {
      inputFileRef.current.click();
      setShowSelectFileImage(false);
    }
  }, [instance, showSelectFile, setShowSelectFileImage]);

  const handleUploadFile = React.useCallback(
    async (file) => {
      // Upload file to you storage / this is dummy, just an example
      const imageURL = await uploadImage(file);
      const { finishUploadCallback } = instance.triggerAction("imageTool");
      finishUploadCallback(imageURL);
    },
    [instance]
  );

  return (
    <>
      <input
        type="file"
        accept="image/png,image/gif,image/jpeg"
        name="image"
        style={{ display: "none" }}
        ref={inputFileRef}
        onClick={() => {
          inputFileRef.current.value = null;
        }}
        onChange={(e) => {
          const file = e.target.files?.[0];
          if (file) {
            handleUploadFile(file);
          }
        }}
      />
      <button
        onClick={() => {
          setShowSelectFileImage(true);
        }}
      >
        Image Tool
      </button>
    </>
  );
};

Trigger the action

Finally a final user trigger the UI element that launches the action.

When active the user:

Select the image to upload.
Image is uploaded with the API the developer choses or has available.
Once the image is uploaded, the user can click or touch on the canvas to place it.

Then the image is added to the canvas as a fully functional node—ready. This action integrates seamlessly with Weave.js's real-time state system, ensuring the new element appears instantly for all connected users.