File Concept

Upload File

For testing purposes, the Froala Rich Text Editor by default stores the files temporarily as a Blob in the browser. While integrating the editor, you should upload them to your own server for privacy reasons, permanent storage and full control over them.

This means that you have to handle the file upload and storage using a server-side language yourself. This article is meant to help you understand how the editor's file upload works.

File Upload flow

  1. Include the file plugin file.

    File is a plugin for the editor and the file.min.js file must be included before being able to use it.


  2. Set the editor's file options.

    When uploading files, you can customize up to 6 options and 4 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.
    fileUploadParams are additional params that are passed in the upload request to the server.
    fileUploadMethod is the HTTP request type.
    fileMaxSize is the maximum file size that can be uploaded.
    fileAllowedTypes is an array with the file types allowed to be uploaded.
    froalaEditor.file.beforeUpload event is triggered before starting the upload request and it can be used to change the upload params or cancel the action.
    froalaEditor.file.uploaded event is triggered after a successfully file upload request, but before inserting the file in the editor.
    froalaEditor.file.inserted event is triggered after inserting the file into the editor.
    froalaEditor.file.error event 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 WYSIWYG HTML editor, a 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 checkout the Froala SDKs.


  5. The editor loads the file in browser.

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


The following snippet highlights how to initialize the Froala WYSIWYG HTML Editor in order to upload files.

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

<script>
  $(function() {
    $('.selector')
      .froalaeditor({
        // 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: ['*']
      })
      .on('froalaEditor.file.beforeUpload', function (e, editor, files) {
        // Return false if you want to stop the file upload.
      })
      .on('froalaEditor.file.uploaded', function (e, editor, response) {
        // File was uploaded to the server.
      })
      .on('froalaEditor.file.inserted', function (e, editor, $file, response) {
        // File was inserted in the editor.
      })
      .on('froalaEditor.file.error', function (e, editor, 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>