onDeleting an image triggering a function.

[Lagnajit09]

Hey techies!!!! I have been working on a project using EditorJS.
It is a blogging website using react and CloudFlare.
The problem I am facing is I am storing the images in my firebase storage and i need a way to trigger the deleteImage function when the user deletes the image. Can't find any relevant functions to do this job. Can anyone help me with this?

            class: Image,
            shortcut: 'ALT+SHIFT',
            config: {
              uploader: {
                uploadByFile(file:File) {
                  return uploadImageToFirebase(file);
                },
                uploadByUrl(url:string) {
                  return new Promise((resolve) => {
                    resolve({
                      success: 1,
                      file: {
                        url: url,
                      },
                    });
                  });
                },
              },
            },
          },  

[neSpecc]

Hi, you can subscribe on onChange event and watch for the "block-removed" event, then filter the "image" blocks and delete corresponded files

[Lagnajit09]

Hey thanks for responding!!

I tried the onChange event and checked the block-removed event. As you can see when I'm inserting an image a 'block-changed' event is being triggered. But upon deleting it, it is showing undefined. Can you explain it?

image: {
            class: Image,
            shortcut: 'ALT+SHIFT',
            config: {
              uploader: {
                uploadByFile(file: File) {
                  return new Promise((resolve, reject) => {
                    const reader = new FileReader();
                    reader.onload = () => {
                      resolve({
                        success: 1,
                        file: {
                          url: reader.result as string,
                        },
                      });
                    };
                    reader.onerror = (error) => {
                      reject(error);
                    };
                    reader.readAsDataURL(file);
                  });
                },
                uploadByUrl(url: string) {
                  return new Promise((resolve) => {
                    resolve({
                      success: 1,
                      file: {
                        url: url,
                      },
                    });
                  });
                },
              },
              onchange: (api:any, event:any) => console.log(event.type)
            },
          },
          code: {
            class: Code,
            config: {
            }
          },
          linkTool: {
            class: LinkTool,
            config: {
              endpoint: `${SERVER}/api/v1/user/fetchurl`, // Your backend endpoint for url data fetching,
            }
          }
        },
        data: data,
        readOnly: read,
       onChange: (api, event) => {updateEditor(api, event); updateBtnText()}

        });
      } catch (error) {
        navigate('/home')
      }
      }
  
      return () => {
        try {
        editorInstance.current?.destroy();
        editorInstance.current = undefined;
        } catch (error) {
          console.log("first")
        }

      };
    }, []);

Here is the snippet you might need.

[neSpecc]

It seems strange. Event.type can't be undefined from our side. I just checked it and it returns the correct type

Maybe you're removing that object somehow before reading?

[Lagnajit09]

Can we get on a discord call if it is fine for you to?
I am a beginner at this and will be grateful if you can spend time checking the issue.
If yes here is my Id megumin3549

Thanks!