Delete Images in Froala Editor

Delete Image

When an image is removed or replaced in the Froala Rich Text Editor, the image file is not deleted from your server. To delete an image from the server, use the editor events to make a delete request to the server.

Image Delete Flow

1. Include the image plugin file.

   Image is a plugin for the editor and the image.min.js file must be included before being able to use it.

   
   

2. Set the editor's image events.

   There are 2 events related to image remove: image.beforeRemove and image.removed. The one that is of interest for us is image.removed, because it is triggered right after the image is removed from the WYSIWYG HTML editor. When a user replaces an image, use image.replaced instead. Starting with v5.5, it passes the previous image's src as a third argument, old_src, so you can delete the old file.

   
   

3. Make request to the server to delete the image.

   After the image is removed or replaced, the server should be notified to delete the physical image. The best way to do that is through a request (for example, with fetch) made after the event fires.

   
   

4. The server processes the HTTP request.

   The server has to interpret the request and remove the stored image and return a success status if there is no problem with the request and the deletion.

   
   

The following snippet highlights how to initialize the Froala WYSIWYG HTML editor in order to delete files when they are removed or replaced in the editor.

// Include the image plugin. 
<script src="../../js/plugins/image.min.js"></script>

<script>
  // Ask the server to delete an image file.
  function deleteImage (src) {
    fetch('http://example.com/image_delete', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ src: src })
    }).then(function (response) {
      if (response.ok) {
        console.log('image was deleted');
      }
    });
  }

  new FroalaEditor('.selector', {
    events: {
      // An image was removed from the editor.
      'image.removed': function ($img) {
        deleteImage($img.attr('src'));
      },

      // An image was replaced. old_src is the image that was replaced (v5.5+).
      'image.replaced': function ($img, response, old_src) {
        deleteImage(old_src);
      }
    }
  });
</script>