Does it have a delete listener to delete image after I clicked remove from toolbar ? about image HOT 18 OPEN

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",
              },
            },
          },
          // ....

from image.

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

from image.

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

from image.

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()
        }
      }
}

from image.

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)
          }
        }
      })
    }
  }

from image.

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 (codex-team/editor.js#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.

from image.

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.

from image.

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 🙌

from image.

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

from image.

@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?

from image.

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

from image.

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

from image.

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.

from image.

@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.

from image.

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

from image.

.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.

from image.

This issue resolved here .closes #54

from image.

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

from image.