Days
Hours
Minutes
Seconds
x

Froala Editor v4.1.4 is Here LEARN MORE

Skip to content

Python File Server Delete

How it works

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

Jump to Complete Example

Intercept file being removed

Removing a file from the editor triggers two events: froalaEditor.file.beforeRemove and froalaEditor.file.removed. You can use either of them to delete the file from the server, however it is recomended to use the second one, since at that point you make sure that the file 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.

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

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

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

      // Request params.
      data: {
        src: file.getAttribute('href')
      }
    })
    .done (function (data) {
      console.log ('File was deleted');
    })
    .fail (function (err) {
      console.log ('File delete problem: ' + JSON.stringify(err));
    })
  }
</script>

Delete the file

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

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

File.delete(src)

Complete Example

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

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

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

      // Request params.
      data: {
        src: file.getAttribute('href')
      }
    })
    .done (function (data) {
      console.log ('File was deleted');
    })
    .fail (function (err) {
      console.log ('File delete problem: ' + JSON.stringify(err));
    })
  }
</script>
# Django
from django.http import HttpResponse
import json
from froala_editor import File

def delete_file(request):
  src = request.POST.get('src', '')
  try:
    File.delete(src)
    return HttpResponse('ok', content_type="application/json")
  except:
    raise Exception('Could not delete file')
# Flask
from flask import request
import json
from froala_editor import File

@app.route('/delete_file', methods=['POST'])
def delete_file():
  src = request.form.get('src')
  try:
    File.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 File

def delete_file(request):
  src = request.POST.get('src')
  try:
    File.delete(src)
    return Response(json.dumps('ok'))
  except:
    raise Exception('Could not delete file')

Do you think we can improve this article? Let us know.

[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_281424918" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_721787010" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_339665267" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>