Does it have a delete listener to delete image after I clicked remove from toolbar ?

[nikitaplanet]

Now I can upload image to backend, but when I clicked remove block from toolbar, the image won't delete in our database, how can I call my delete api when I clicked the button ?

https://imgur.com/yel1H1F

[miguelangeltorresfp]

I can't delete any block. ( only using backspace which doesn't apply to image blocks ) I've tried the official demo and it doesn't seem to work either. link

[mpandzo]

@miguelangeltorresfp not trying to be facetious, but, the block delete action requires you to click the X button twice. It works that way on the official demo as well and works fine.

If you did indeed click the button twice (ie confirm the delete) could you perhaps share your browser/device info https://whatsmybrowser.org/ so that others can try and replicate the issue?

[AdrienPVM]

I'm having the same issue. No problem uploading an image to my server but how can I get the event that I'm deleting one (and so getting the block data that i'm deleting) so that I can also delete from my server? I've been trying to figure out if there's such a thing in the api but with no success

[vitaliybalayan]

I'm having the same issue. No problem uploading an image to my server but how can I get the event that I'm deleting one (and so getting the block data that i'm deleting) so that I can also delete from my server? I've been trying to figure out if there's such a thing in the api but with no success

i have the same problem

[Lijef42]

I am having same issue, is there any OnDelete event I could bind?

[Vendin]

I'm having the same issue. No problem uploading an image to my server but how can I get the event that I'm deleting one (and so getting the block data that i'm deleting) so that I can also delete from my server? I've been trying to figure out if there's such a thing in the api but with no success

I have the same problem. This problem will increase the cost of storing files because unused files will be stored. This is not economical.

[christoph-kluge]

Perhaps I'm wrong or didn't found a better solution but onDelete sounds to me like a quick win solution but will create new problemes. Example: While the block can be deleted it doesn't really mean that the editor has performed it's save action. A reload would still have the same block but the image would be removed already.

In my case I did extended the editorjs-core with a unique-id per block (https://github.com/codex-team/editor.js/issues/873) and used this id for a server-side diff which allows me to identify if a block got created, modified, moved or deleted. I'm using this to dispatch specific events and during the delete-event I'm using an async s3 delete operation for the object.

[MohitKS5]

@christoph-kluge Yeah that's absolutely correct. But diff is overkill if you just want to delete images. I keep an array called deleted, I append the image_key to it whenever a new image is deleted and send it to backend server only when user saves the editor data.

[cgorrieri]

@MohitKS5 How do you detect that the image is deleted without doing a diff?

[patratel]

Hey Guys

I found a solution that worked for me which i will share down here. I'm using VueJS for the project and currently saving images in FirebaseStorage using "uploadByFile" function. The way I'm saving them is by generating a unique UID for each image, attaching it to the name and saving it in the state of the application. In order to detect the deletion of blocks I'm using the onChange listener that comes with EditorJS. In it you can access the current number of block in the editor. I check to see if any was deleted, use javascript to select all the images blocks currently in the editor. I subtract the UID from the name of the image and cross-reference it with the array of imagesUploade saved in the state. If any of them is missing i delete it from Firestore and subsequently from the state. Below is the code for this:

this.editor = new EditorJS({
      onChange: (ev) => {
        if(ev.blocks.getBlocksCount() < that.previousCount)
        {
          let noMatch = [...that.imagesUploaded]
          document.querySelectorAll('.image-tool__image-picture').forEach((img) => {
              let indx = (img.src).match(/images%2F(.*?)\?alt/)[1]
              noMatch.splice(noMatch.indexOf(indx, 1));
          })
          if(noMatch.length == 1)
          {
            storageRef(`${that.sessionId}/images/${noMatch[0]}`).delete()
            that.imagesUploaded.splice(that.imagesUploaded.indexOf(noMatch[0]), 1)
          }
        }
        else{
          that.previousCount = ev.blocks.getBlocksCount()
        }
      }
}

[Isaac-Svi]

Using the idea from @patratel , I did something similar in React.

Basically, I used a custom uploadFile() function in my image config. Whenever an image is uploaded, the url for that image is stored in an array. Each time the change event is triggered in the editor, a change handler function checks if the number of images in the image array is equal to the number of images displayed in the editor. If there are more entries in the images array than there are images in the editor, the function filters out the the extra image url and sends it to the back end with a delete request, where the image gets deleted.

Here's the code:

const [imagesUploaded, setImagesUploaded] = useState([])

// tools config
const tools = {
    paragraph,
    image: {
      class: ImageTool,
      config: {
        uploader: {
          async uploadByFile(file) {
            const formData = new FormData()
            formData.append('image', file)

            try {
              const res = await fetch('/api/upload', {
                method: 'POST',
                body: formData,
              })
              const json = await res.json()

              // keep track of images, add the url of each new image to our array
              setImagesUploaded((x) => [...x, json.file.url])

              return json
            } catch (err) {
              console.log(err.message)
            }
          },
        },
      },
    },
  }

 // change handler
 const handleChange = () => {
    // get all current images in editor
    const currentImages = []
    document
      .querySelectorAll('.image-tool__image-picture')
      .forEach((x) => currentImages.push(x.src.match(/\/api.*$/g)[0]))

    if (imagesUploaded.length > currentImages.length) {
      imagesUploaded.forEach(async (img) => {
        if (!currentImages.includes(img)) {
          try {
            const res = await fetch('/api/upload', {
              method: 'DELETE',
              headers: {
                'Content-Type': 'application/json',
              },
              body: JSON.stringify({ path: img.match(/image.*$/g)[0] }),
            })
            const data = await res.text()
            console.log(data)
            setImagesUploaded((images) => images.filter((x) => x !== img))
          } catch (err) {
            console.log(err.message)
          }
        }
      })
    }
  }

[ssmirr]

.image-tool__image-picture

Thanks for sharing your code snippet @Isaac-Svi! Just to point out a caveat, that editor.js in the future may rename the CSS classes to something else (i.e. .image-tool__image-picture). If you're not careful to update your code, then this snippet might accidentally remove all the uploaded images which you wanted to keep.

[HarshitMishraGit]

First of All please read it fully . I was having same problem but now it is sorted and Image is deleting successfully from server

we are having some LifeCycle methods of the block , One of them is removed But for built-in Tools such as image we have to extend the class and override the removed function so just

1. Go to your tools section

2. Here I have build a new class just to override the removed( ) method

3. Use this MyImageTool class inplace of the built-In ImageTool to apply the removed( ) functionality

4. In this removed( ) function write your code to delete the image For Firebase I have first check where I am getting the url so you can try with a.console.log(this._data) - and you are able to see the block data b. To get the url - console.log(this._data.file.url) .. this will give you entire url of the image before removing the block c. Get the refrence of the image by url d. Delete the image ☺️

5. final Result

https://user-images.githubusercontent.com/93585405/232338625-fdb2b93f-e63d-470b-a9f0-21ceaecaeb33.mp4

[ahmedrowaihi]

First of All please read it fully . I was having same problem but now it is sorted and Image is deleting successfully from

Hey @HarshitMishraGit, thanks for the hints... your answer is correct, but it's just a bit not obvious with the bunch of images you provided. so I will just simplify it so everyone reaches here can get it straightforward

Enhance ImageTool LifeCycle

    import Image from "@editorjs/image"

    // extend the image tool to enhance the image removal lifecycle
    class CustomImage extends Image {
      removed() {
        // access the image block's file data
        const { file } = this._data
        // do something with the file data
        // i.e. delete from server or s3 bucket
        }
   }

Usage

      const editor = new EditorJS({
        tools: {
          image: {
            class: CustomImage as any,
            config: {
              endpoints: {
                byFile: "/api/upload",
              },
            },
          },
          // ....

[mr2aminul]

First of All please read it fully . I was having same problem but now it is sorted and Image is deleting successfully from server

we are having some LifeCycle methods of the block , One of them is removed But for built-in Tools such as image we have to extend the class and override the removed function so just

1. Go to your tools section
2. Here I have build a new class just to override the removed( ) method
3. Use this MyImageTool class inplace of the built-In ImageTool to apply the removed( ) functionality
4. In this removed( ) function write your code to delete the image For Firebase I have first check where I am getting the url so you can try with a.console.log(this._data) - and you are able to see the block data b. To get the url - console.log(this._data.file.url) .. this will give you entire url of the image before removing the block c. Get the refrence of the image by url d. Delete the image ☺️

5. final Result

   bandicam.2023-04-17.01-22-13-787.mp4

Thank's bro.

[NidhiSharma63]

First of All please read it fully . I was having same problem but now it is sorted and Image is deleting successfully from server

we are having some LifeCycle methods of the block , One of them is removed But for built-in Tools such as image we have to extend the class and override the removed function so just

1. Go to your tools section
2. Here I have build a new class just to override the removed( ) method
3. Use this MyImageTool class inplace of the built-In ImageTool to apply the removed( ) functionality
4. In this removed( ) function write your code to delete the image For Firebase I have first check where I am getting the url so you can try with a.console.log(this._data) - and you are able to see the block data b. To get the url - console.log(this._data.file.url) .. this will give you entire url of the image before removing the block c. Get the refrence of the image by url d. Delete the image ☺️

5. final Result

   bandicam.2023-04-17.01-22-13-787.mp4

Thank you so much 🙌

[HarshitMishraGit]

This issue resolved here .closes #54

[Hydrock]

Thanks. This lifecycle removed method truly helped me. But now, i have another problem. I have removed method executed even when just render Custom Image component.

Events order: 1) rendered 2) removed 3) rendered 4) updated

Update: I found an issue Earlier, I solved another problem: fixing an annoying warning in Chrome addRange(): The given range isn't in document. I call editor.render method after 100 ms

setTimeout(() => {
    if (editor && editor.render) {
        editor.render(data);
    }
}, 100);

Method editor's render method calls removed method for all previous rendered components and its cam provide to deletion all images on your pages

I do not know why it happens

[173303-WebConcepts]

Few easy steps to delete image from both editorjs and your database.

1) Make a CustomImageTool class and extend it with Editorjs ImageTool

import ImageTool from "@editorjs/image";
import axios from "axios";

class CustomImageTool extends ImageTool {
  constructor({ data, config, api, readOnly }) {
    super({ data, config, api, readOnly });
    this.api = api;
    this.data = data;
  }

  static get toolbox() {
    return {
      title: "Image",
      icon: "<svg>...</svg>", // Provide your SVG icon here
    };
  }

  destroy() {
    this.deleteImage();
  }

  deleteImage() {
    let url = this.data.file?.url;
    let parts = url.split("/");
    let lastPart = parts[parts.length - 1];

    const imageUrl = lastPart;

    if (imageUrl) {
      axios
        .post(
          `${import.meta.env.VITE_API_BASE_URL}/common/protected/delete_images`,
          { images: imageUrl }
        )
        .then((response) => {
          if (response.data.success) {
            console.log("Image deleted successfully");
          } else {
            console.error("Failed to delete image");
          }
        })
        .catch((error) => {
          console.error("Error deleting image:", error);
        });
    }
  }
}

export default CustomImageTool;

2) Now Use it in editorjsTools

const EDITOR_JS_TOOLS = {
  header: {
    class: Header,
    inlineToolbar: false,
    // tunes: false,
    config: {
      placeholder: "Enter a header",
      levels: [1, 2, 3, 4],
      defaultLevel: 4,
    },
  },
  list: {
    class: List,
    inlineToolbar: true,
    config: {
      defaultStyle: "unordered",
    },
  },
  image: {
    **class: CustomImageTool,          // put the custom ImageTool class Here**
    config: {
      endpoints: {
        byFile: `${import.meta.env.VITE_API_BASE_URL}/common/protected/upload_image`, // Your backend file uploader endpoint
        // byUrl: `http://localhost:4000/images/1716050943785about.PNG`, // Your endpoint that provides uploading by URL
      },
      additionalRequestHeaders: {
        Authorization: `Bearer ${token ? JSON.parse(token) : ""}` // Optional authorization header
      },
      field: 'image', // Form field name for the uploaded image
      types: 'image/*', // Accepted MIME types
      captionPlaceholder: 'Enter a caption', // Placeholder text for the image caption
      buttonContent: 'Select an Image', // Custom button content
    }
  }
  // image: SimpleImage,
  // list: List,
  // checklist: Checklist,
  // quote: Quote,
  // warning: Warning,
  // marker: Marker,
  // code: CodeTool,
  // delimiter: Delimiter,
  // inlineCode: InlineCode,
  // linkTool: LinkTool,
  // embed: Embed,
  // table: Table
};

[ugumerie]

 static get toolbox() {
    return {
      title: "Image",
      icon: "<svg>...</svg>", // Provide your SVG icon here
    };
  }

Hello @173303-WebConcepts

What is the purpose of the static function above?

Thanks