Skip to content
Star

Python Image Server Delete

How it works

  1. Your code intercepts the image being removed from the javascript editor.
  2. When an image is removed, a request is made to the server telling it to delete the image from disk.
  3. Once the request hits the server, it deletes the image.

Jump to Complete Example

Intercept image being removed

When an image is being removed from the javascript editor, it triggers two events: froalaEditor.image.beforeRemove and froalaEditor.image.removed. You could use either of them to delete the image from server, however we recommend the second one because at that point you're 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 it can easily be done using an AJAX request.

<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. Using the code from the previous step, makes the image path available in the body of the request. The Image.delete method from the Python SDK is expecting the path of the image to remove from disk.

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

Image.delete(src)

Complete Example

<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>

# 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')

# 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')

# 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')
File: 2177