Days
Hours
Minutes
Seconds
x

Froala Editor v4.2.0 is Here LEARN MORE

Skip to content

Ruby File Server Delete

How it works

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

Jump to Complete Example

Intercept file being removed

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

<script>
  $(function() {
    // Catch the file being removed.
    $('.selector').on('froalaEditor.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. Using the code from the previous step, makes the file path available in the params variable. The FroalaEditorSDK::File.delete() method from the Ruby SDK is expecting the path of the file to remove from disk.

Note: The path of the file is relative to the Rails.root global variable.

FroalaEditorSDK::File.delete(params[:src], "public/uploads/files/")

Complete Example

<script>
  $(function() {
    // Catch the file being removed.
    $('.selector').on('froalaEditor.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>
class UploadController < ActionController::Base

  ...

  def delete_file
    render :json => FroalaEditorSDK::File.delete(params[:src], "public/uploads/files/")
  end

  ...

end
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_627789460" 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_491117565" 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_446636136" 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>