image:removed isn't triggered

[BenPrt]

Hi there,

I'm using a custom file storage to handle image uploads and it's working fine. Now, I'd want to handle image deletion but I have a problem using the according callback. I register it this the same way I did with the upload callback :

registerUploadCallback = () => {
    // Register callback method to Email Editor (unLayer).
    this.editorRef.registerCallback("image", (file, done) => {
      
       [...]

      // Call Api to get the temporary file name.
      apiPostUploadFile(formDataToSend)
        .then((apiResponse) => {

          [...]

          done({
            progress: 100,
            url:      fileURL,
          });
        })
        .catch((error) => {
          handleError(error);
        });
    });
  }

registerImageDeletionCallback = () => {
    console.log("registering image deletion callback...");
    // Register callback method to Email Editor (unLayer).
    this.editorRef.registerCallback("image:removed", (image) => {
      console.log("DELETION", image);
    });
  }

When I upload an image, the upload callback is well triggered, but when I click on the "Delete" button, nothing happens.

Am I doing something wrong or is there a problem with the image:removed callback ?

Thank you !

[adeelraza]

@BenPrt the image:removed call back is only called when you want to permanently delete the image from the "Uploads" tab. It's not called when you delete an image from your design. For that, I would recommend looking at design:updated.

[BenPrt]

Ohw, okay, thanks !

I succeeded to do what I planned (delete media from my personnal file storage on layout deletion) with the design:updated callback, as you suggested !

Thank you !

[bhamlefty]

@adeelraza I am trying to use 'image:removed' for its intended use (deleting an image from the uploads tab). I am getting "Invalid image selected" when I click delete in the editor. Any ideas why?

[adeelraza]

@bhamlefty I suspect this maybe happening because we expect the image id to be a number.

[JoezerSmaniotto]

registerCallback precisa ser chamado dentro da função onReady:

exemplo:

const onReady = () => { emailEditorRef.current.editor.registerCallback ('imagem', função (arquivo, concluído) {

let files = file.attachments[0] let reader = new FileReader(); let imageBase64; console.log("onReady=> emailEditorRef") console.log("File: ", file) console.log("FileS: ", files)

reader.onloadend = function () { imageBase64 = reader.result; console.log("64 =>", imageBase64) }

if (file) { reader.readAsDataURL(files); }
}; }

lembrando que onReady deve estar dentro do componente EmailEditor assim como os outros adereços de que você precisa.

<EmailEditor ref={emailEditorRef} onLoad={onLoad} onReady={onReady} saveDesign={saveDesign} options={{locale: 'pt-BR'}} />