Server Side Integration

Delete Image with PHP

The following example illustrates how to handle image delete on your server using PHP as a server-side language. For step by step explanation see image delete concept.

First, you need to pass to the Froala WYSIWYG HTML Editor, upon initialization, the URL where the delete request is being made. In our case it would be '/delete_image.php'. We are also setting the events to catch the image removal from the editor and make the delete request.

<script>
  $(function() {
    $('.selector')
      .editable({
        // Set the image delete URL.
        imageDeleteURL: '/delete_image.php'
      })

      // Catch image removal from the editor.
      .on('editable.afterRemoveImage', function (e, editor, $img) {
        // Set the image source to the image delete params.
        editor.options.imageDeleteParams = {src: $img.attr('src')};

        // Make the delete request.
        editor.deleteImage($img);
      });
  });
</script>

Next, you have to process the request on your PHP server and delete the image. This is a basic example of how the "delete_image.php" file may look like. We are assuming that the images paths are relative to the directory with the PHP "delete_image.php" file.

<?php
    // Get src.
    $src = $_POST["src"];

    // Check if file exists.
    if (file_exists(getcwd() . $src)) {
      // Delete file.
      unlink(getcwd() . $src);
    }
?>