Concepts

File Upload

By default the Froala Rich Text Editor stores the files as a Blob in the browser. We recommend that you upload them to your own server. In this case you have to handle the file upload and storage using a server-side language yourself. This tutorial is meant to help you understand how the editor's file upload works.

File Upload flow

1. Include the file upload plugin file.

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

   
   

2. Set the editor's file upload options.

   When uploading files, you can customize up to 5 parameters: buttons,  fileUploadParam,  fileUploadURL,  fileUploadParams and editable.fileError.
   • buttons is an array of buttons that appear in the toolbar. As a plugin, the upload file buttons must be manually added in the toolbar buttons list.
   • 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.
   • editable.fileError 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 read the File Upload with PHP server integration example.

   
   

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, editable.fileError event is triggered.

Note: Returning a JSON with an error field will throw an error with the custom message contained. E.g. { error: 'My custom error message.' }

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

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

<script>
  $(function() {
    $('.selector')
      .editable({
        // Add the upload file button in the toolbar buttons list.
        buttons: ['bold', 'italic', 'uploadFile', 'html'],

        // Set the file upload parameter.
        fileUploadParam: 'file_param',

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

        // Additional upload params.
        fileUploadParams: {id: 'my_editor'}
      })
      .on('editable.fileError', function (e, editor, error) {
        // Custom error message returned from the server.
        if (error.code == 0) { ... }

        // Bad link.
        else 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) { ... }
      })
  });
</script>