Image Concepts

Delete Image

When an image is removed from the Froala Rich Text Editor, the image is not from the server. In order to delete an image from the server, you have to use the editor events to and 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.

   
   

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

   After the image is removed from the editor, the server should be notified to delete the physical image. The best way to do that is through an AJAX request made after the image was removed.

   
   

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 from the editor.

Copy

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

<script>
  new FroalaEditor('.selector', {
    events: {
      'image.removed': function ($img) {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {

          // Image was removed.
          if (this.readyState == 4 && this.status == 200) {
             console.log ('image was deleted');
          }
        };
        xhttp.open("POST", "http://example.com/image_delete", true);
        xhttp.send(JSON.stringify({
          src: $img.attr('src')
        }));
      }
    }
  })
</script>