image

image copied to clipboard

When the image block is removed, is there a possibility to specify an endpoint where the image url can be sent to? Would be a useful way of deleting the image server side if removed from the editor.

Or maybe an event fired when the block removal button is clicked with block data as payload? (It doesn't seem to be any event fired when this button is clicked)

Any updates about image delete?

Same problem. And nothing find about editorjs api triggers in block toolbox.

Same here I'm stuck with this problem. There might be something to do with the editor's api bu no luck so far

The Editor API doesn't trigger a block destroy or even a global delete callback / event when it removes a block so deleting an image is impossible until that's implemented at the API level; however... that's only if you upload the image when you select it.

This plugin supports a custom method in config.uploader.uploadByFile which is called with the selected file. You can add some logic to display the image without uploading it, and execute the uploading logic only when saving the editor contents.

image: {
  class: Image,
  config: {
    uploader: {
      // basic file upload preview
      uploadByFile: async (file) => { // async because it expects a promise
        const url = window.URL.createObjectURL(file) // generate a blob in memory

        return {
          success: 1,
          file: {
            url,
            name: file.name,
            size: file.size,
            source: file // keep a reference to the original file
          }
        }
      }
    }
  }
}

This approach is far from ideal, and you'll have to call window.URL.revokeObjectURL(url) after uploading the image to release it from memory

I'm also keeping the original file as source in the payload... you don't have to do that, you can simply upload the blob generated by createObjectURL

Deleting a single image remains impossible, but you can delete all images when you delete the document. Another solution is to add a custom delete button which deletes the image (using some endpoint) then deletes the block by index - which is a method available in the API

I'd love if this would be added. Otherwise any workarounds for this problem?

Similar issue https://github.com/editor-js/image/issues/54

#87 You can use this extension to solve this problem.

Usage

• Replace the contents of node-modules/@editorjs/image/dist/bundle.js by dist/bundle.js. repository.

{
  image: {
    class: Image,
    config: {
      onRemove: data => console.log(data)
    }
   // other config options
}

I don't recommend using "onRemove" events to trigger file deletion in your back end, here is why: imagine you have a blog post with some images uploaded and saved. You decide to edit it and you plan to delete one image, but then you change your mind or you leave your draft unsaved. Now you don't have your uploaded file anymore and your blog post is corrupted.

~~The only~~ One way to properly address this task is to compare your data (before vs after) and delete your removed uploads only after persisting the changes to your database (or whatever you use). For temporary/unsaved uploads, you can mark them on upload and then unmark them when you save your data. A simple garbage collector task may clean up orphan uploads once in a while...

I hope this helps.

@liarco That's not the only way. Taking diff is just one way and there are better solutions. You don't need to remove the file the moment onRemove trigger is fired. You just need to append it to an array named say assetsToDelete. This array is sent to backend when you finally call editor.save() and call backend endpoint or in your example, when you save the blog.

@liarco That's not the only way. Taking diff is just one way and there are better solutions. You don't need to remove the file the moment onRemove trigger is fired. You just need to append it to an array named say assetsToDelete. This array is sent to backend when you finally call editor.save() and call backend endpoint or in your example, when you save the blog.

@MohitKS5 I totally see your point and that's right, using this event for client-side only operations can be a good idea and it may save the back end some work, but then you need to trust your client a lot and you have to take many possible issues into account to be sure that your data is perfectly in sync with the editor state (exceptions, undo history, etc.).

Don't get me wrong, I know that your solution is perfectly fine, but I would still not recommend it to everyone since it can be a quite expensive implementation (done properly) compared to a simple server-side diff. But that's my personal opinion.

The Editor API doesn't trigger a block destroy or even a global delete callback / event when it removes a block so deleting an image is impossible until that's implemented at the API level; however... that's only if you upload the image when you select it.

This plugin supports a custom method in config.uploader.uploadByFile which is called with the selected file. You can add some logic to display the image without uploading it, and execute the uploading logic only when saving the editor contents.

image: {
  class: Image,
  config: {
    uploader: {
      // basic file upload preview
      uploadByFile: async (file) => { // async because it expects a promise
        const url = window.URL.createObjectURL(file) // generate a blob in memory

        return {
          success: 1,
          file: {
            url,
            name: file.name,
            size: file.size,
            source: file // keep a reference to the original file
          }
        }
      }
    }
  }
}

This approach is far from ideal, and you'll have to call window.URL.revokeObjectURL(url) after uploading the image to release it from memory

I'm also keeping the original file as source in the payload... you don't have to do that, you can simply upload the blob generated by createObjectURL

Deleting a single image remains impossible, but you can delete all images when you delete the document. Another solution is to add a custom delete button which deletes the image (using some endpoint) then deletes the block by index - which is a method available in the API

the file source its not appear