Python Image Server Delete

How it works

1. Code intercepts the image removed from the editor.
2. Removing an image sends to the server a request to delete the image from disk.
3. Once the request reaches the server, it deletes the image.

Jump to Complete Example

Intercept image being removed

Removing an image from the editor triggers two events: froalaEditor.image.beforeRemove and froalaEditor.image.removed. You can use either of them to delete the image from the server, however it is recomended to use the second one, since at that point you make sure that the image was removed from the editable area.

Send request to the server

There is no built-in feature that makes the request to the server, however you can use an AJAX request.

Copy

<script>
  // Catch the image being removed.
  var editor = new FroalaEditor('.selector');

  editor.opts.events['image.removed'] = function (e, editor, $img) {
    $.ajax({
      // Request method.
      method: 'POST',

      // Request URL.
      url: '/delete_image',

      // Request params.
      data: {
        src: $img.attr('src')
      }
    })
    .done (function (data) {
      console.log ('Image was deleted');
    })
    .fail (function (err) {
      console.log ('Image delete problem: ' + JSON.stringify(err));
    })
  }
</script>

Delete the image

The server implementation is responsible for receiving the request and handling it appropriately. The code on the previous step makes the image path available in the body of the request. The Image.delete method from the Python SDK expects the path of the image to remove from disk.

Note: The path of the image is relative to the root of your application.

Copy

Image.delete(src)

Complete Example

Copy

<script>
  // Catch the image being removed.
  var editor = new FroalaEditor('.selector');

  editor.opts.events['image.removed'] = function (e, editor, $img) {
    $.ajax({
      // Request method.
      method: 'POST',

      // Request URL.
      url: '/delete_image',

      // Request params.
      data: {
        src: $img.attr('src')
      }
    })
    .done (function (data) {
      console.log ('Image was deleted');
    })
    .fail (function (err) {
      console.log ('Image delete problem: ' + JSON.stringify(err));
    })
  }
</script>

Copy

# Django
from django.http import HttpResponse
import json
from froala_editor import Image

def delete_image(request):
  src = request.POST.get('src', '')
  try:
    Image.delete(src)
    return HttpResponse('ok', content_type="application/json")
  except:
    raise Exception('Could not delete image')

Copy

# Flask
from flask import request
import json
from froala_editor import Image

@app.route('/delete_image', methods=['POST'])
def delete_file():
  src = request.form.get('src')
  try:
    Image.delete(src)
    return json.dumps('ok')
  except:
    raise Exception('Could not delete file')

Copy

# Pyramid
from pyramid.response import Response
import json
from froala_editor import Image

def delete_image(request):
  src = request.POST.get('src')
  try:
    Image.delete(src)
    return Response(json.dumps('ok'))
  except:
    raise Exception('Could not delete image')