remove image file from storage when image being remove in editor

[ayophanz]

remove image file from storage when image being remove in editor

[x-rune-x]

I've just started using this extension but I'm wondering if this is what the reject parameter is for?

[refkinscallv]

where do i find the answer for this ?

[isaiascardenas]

Hi, same problem here. How can i handle when an image is removed in editor?

[lishenyu16]

The developers of this library have no ideas how to handle this either, they only thought of uploading lol~
Do they know how common it is for a user that after adding an image, they may want to delete the image immediately

[aeon3k]

@NoelOConnell any idea ?

[NoelOConnell]

You can use the text-change event from Quilljs to keep track of changes.

https://quilljs.com/docs/api/#text-change

You can check for images added/removed by the user and then remove the image from storage if you want.

Just remember that the user could undo (Ctrl z) the removal of an image so it's best not to remove the image from storage until the user has saved any changes and left the web so they can no longer undo any edits.

[aeon3k]

Here's a full working solution. The content-type must be delta (the default value)
PS : this does not include the CTRL-Z case mentionned above.

  <QuillEditor
    ref="myquilleditor"
    :options="options"
    :modules="modules"
    toolbar="full"
    v-model:content="content"
    @text-change=ListenToChanges
  />

function ListenToChanges(a) {
  let currentContents = myquilleditor.value.getContents();
  if (a.source !== "user") return;
  const inserted = getImgUrls(a.delta);
  const deleted = getImgUrls(
    myquilleditor.value.getContents().diff(a.oldContents)
  );
  inserted.length && console.log("insert", inserted);
  deleted.length && console.log("delete", deleted);
  deleted.length && deleteFileInTheCloud(deleted[0]);
}

function getImgUrls(delta) {
  return delta.ops
    .filter((i) => i.insert && i.insert.image)
    .map((i) => i.insert.image);
}

onMounted(() => {
  content.value = new Delta(props.it.body);
});

....