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

   Copy

   <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.
   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.
   file.beforeUpload	Event 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.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 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.

Copy

// 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>