'OnImageUpload' callback delete image from server issue

[dinakar17]

Basically, I want to upload and delete an image to the server as soon as the image is uploaded or deleted from the sunedtior respectively.

I've been successfully able to upload images to the server using the following 'imageUploadBefore' call back function

const onImageUploadBefore = (
    files: FileList,
    info: { imageUploadUrl: string; imageUploadHeader: string },
    uploadHandler: any
  ) => {

    const newFile = new File([files[0]], files[0].name, {
      type: files[0].type,
    });
    const formData = new FormData();
    formData.append("profile-file", newFile);

    uploadImage(formData, imageServerAxiosConfig)
      .then((res) => {
        // console.log(res);
        res.data.result[0].url =
          process.env.NEXT_PUBLIC_IMAGE_API_URL +
          res.data.result[0].url.replace(/\\/g, "/");
        uploadHandler(res.data);

        info.imageUploadUrl = res.data.result[0].url;
        info.imageUploadHeader = "url";

      })
      .catch((err) => {
        // console.log(err);
        alert("Image upload failed. Please try again later.");
      });
  };

But when I try to delete the image from the server using 'onImageUpload' callback

const onImageUpload = (
    targetImgElement: HTMLImageElement, index: number, state: string, imageInfo: object, remainingFilesCount: number
  ) => {
    console.log("Image upload callback");
    if(state === "delete"){
      // delete the image from the server

// ========================== **Issue Here** =========================
      console.log(targetImgElement, index, state, imageInfo, remainingFilesCount); // null, 0, 'delete', null, 0

      // const fileName = url.split("/").pop();
      // api.deleteImage(fileName as string, imageServerAxiosConfig)
      //   .then((res) => {
      //     // console.log(res);
      //   })
      //   .catch((err) => {
      //     alert("Image is not ")
      //   }
      // );
    }
  };

Essentially, I am getting no info on the image I am deleting. Could you please figure out what should I do in order to grab the image Info for deleting the image from the server?

By the way, I really wanted to say this so badly. "suneditor" is really awesome. The effort you put into making docs and examples websites and fine-tuning js code is really jaw-dropping. And the fact that it is an open-source makes it even more awesome.

[dinakar17]

Pls look into my issue!!

[JiHong88]

Sorry for the late reply :( I'll check.

[JiHong88]

Currently, it is possible in a slightly cumbersome way.

const onImageUpload = (
    targetImgElement: HTMLImageElement, index: number, state: string, imageInfo: object, remainingFilesCount: number
  ) => {
    if(state === "delete"){
        console.log("fileInfo", editorInstance.core.context.image._infoList[index]);
    }
  };

[khangnguyen19999kn]

  const handleImageStateChange = (
    _targetImgElement: HTMLImageElement,
    index: number,
    state: TStateImageUpload,
    imageInfo: UploadInfo<HTMLImageElement>
  ) => {
    if (state === EImageStatusEditor.DELETE) {
      console.log("fileInfo", editor.current?.core.context.image._infoList);
    }
  };

I try your solution but when i console it's empty :(