Days
Hours
Minutes
Seconds
x

Froala Editor v4.2.0 is Here LEARN MORE

Skip to content

File Concept

Upload File

By default Froala Editor stores files temporarily as a Blob in the browser. When you integrate the editor, make sure you upload files to your own server for privacy reasons, permanent storage and full control over them.

You have to handle file upload and storage using a server-side language. This article describes how file upload works.

File Upload

  1. Include the File plugin file.min.js

    <script src="../../js/plugins/file.min.js"></script>
  2. Set the editor's file options.

    You can use the following options and events:

    fileUploadParam Is the name of the parameter that contains the file information in the upload request. The default value is "file" but you can change it to whatever name you want.
    fileUploadURL Is the URL where the upload request is made.
    fileUploadParamsAre additional params that are passed in the upload Request to the server.
    fileUploadMethodIs the HTTP request type.
    fileMaxSizeIs the maximum file size that can be uploaded.
    fileAllowedTypesIs an array with the file types allowed to be uploaded.
    file.beforeUploadEvent is triggered before starting the upload request and it can be used to change the upload params or cancel the action.
    file.uploaded Event is triggered after a successfully file upload request, but before inserting the file in the editor.
    file.inserted Event is triggered after inserting the file into the editor.
    file.errorEvent is triggered if any errors occur during the upload process.

  3. AJAX request from editor to the fileUploadURL link.

    When a file is inserted into the editor, an HTTP request is automatically made to the server.


  4. The server processes the HTTP request.

    The server has to process the upload request, save the file and return a JSON containing a link to the uploaded file. The returned JSON needs to look like: { "link": "path/to/file.png" }

    If you need help with the server side file upload process please refer to Froala SDKs.


  5. The editor loads the file in the browser.

    When the request finishes, the editor loads the file. If the returned hashmap does not follow the right structure or the file cannot be loaded, the file.error event is triggered.


The following section describes how to initialize the Froala Editor to to enable file upload.

// Include the file plugin.
<script src="../../js/plugins/file.min.js"></script>

<script>
  new FroalaEditor('.selector', {
    // Set the file upload parameter.
    fileUploadParam: 'file_param',

    // Set the file upload URL.
    fileUploadURL: '/upload_file',

    // Additional upload params.
    fileUploadParams: {id: 'my_editor'},

    // Set request type.
    fileUploadMethod: 'POST',

    // Set max file size to 20MB.
    fileMaxSize: 20 * 1024 * 1024,

    // Allow to upload any file.
    fileAllowedTypes: ['*'],

    events: {
      'file.beforeUpload': function (files) {
        // Return false if you want to stop the file upload.
      },
      'file.uploaded': function (response) {
        // File was uploaded to the server.
      },
      'file.inserted': function ($file, response) {
        // File was inserted in the editor.
      },
      'file.error': function (error, response) {
        // Bad link.
        if (error.code == 1) { ... }

        // No link in upload response.
        else if (error.code == 2) { ... }

        // Error during file upload.
        else if (error.code == 3) { ... }

        // Parsing response failed.
        else if (error.code == 4) { ... }

        // File too text-large.
        else if (error.code == 5) { ... }

        // Invalid file type.
        else if (error.code == 6) { ... }

        // File can be uploaded only to same domain in IE 8 and IE 9.
        else if (error.code == 7) { ... }

        // Response contains the original server response to the request if available.
      }
    }
  });
</script>

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

Ready to dive in? Explore our plans

[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1944530257" 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_1755104954" 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_1797644154" 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>