- Getting Started
- Browser Support
- Languages Support
- Shortcuts
- Activation
- Examples
- Customize the Editor
- Use-cases
- Plugins
- APIs
- Development Frameworks
- Server Integrations
- Server SDKs
- Migration Guides
- Changelog
- Tutorials
File Plugin
Upload any kind of files and special links will be inserted in the editor to download them. You can drag and drop any file to upload it or use the specially designed popup for handling file upload
Plugin options:
fileAllowedTypes Array - Default: ['*'] | The list of file types that are allowed to be uploaded. Although this will restrict uploading other types of files, we strongly recommend you to check the file type on the server too. |
fileInsertButtons Array - Default: ['fileBack', '|'] | The list of file types that are allowed to be uploaded. Although this will restrict uploading other types of files, we strongly recommend you to check the file type on the server too. |
fileMaxSize Number - Default: 1024 * 1024 * 10 | The maximum file size allowed on upload in bytes. The default value is 10MB. Although this makes an additional check before uploading the file, it is highly recommended to check file size on your server too. |
fileUpload Boolean - Default: true | Enable or disable file upload. |
fileUploadMethod String - Default: 'POST' | The HTTP file upload request type. |
fileUploadParam String - Default: 'file' | Customize the name of the parameter that contains the file in the upload request. |
fileUploadParams Object - Default: {} | Pass additional parameters to the file upload request. |
fileUploadToS3 Object - Default: false | Set the options for file upload to S3. All the fields from the example below are required. Also make sure that you have enabled CORS on Amazon. |
fileUploadURL String - Default:'http://i.froala.com/upload' | The URL where the files uploaded by the user are saved. |
fileUseSelectedText Boolean - Default: false | Enables using the file's name instead of the selected text when a file is inserted. |
Plugin methods:
file.insert (link, , [response]) returns: Object | Insert the link to a file at the cursor position. ● link:The link to the file. Type: String ● text: The text for the file. Type: String ● response: The response from the server. Type: String |
file.upload (files) returns: Object | Upload the passed file to the server. ● files: An array with the files to be uploaded to the server. It is usually the value of a file input. Type: Array |
Plugin events:
file.beforeUpload (files) | Triggered before uploading a file to the server. Note: Returning false in the handler assigned to the event will cancel the current action. ● files: An array with the files to be uploaded. |
file.error (error, response) | Triggered after error occurs in uploading a file to the server. Note: Returning false in the handler assigned to the event will cancel the current action. ● error An object containing error code and description. ● response Response object received from server. |
file.inserted ($file, response) | Triggered after the request to upload a file has been completed successfully. ● $file A jQuery object with the inserted file. ● response The original response from the server. |
file.unlink (link) | Triggered after removing a file link. Note: Returning false in the handler assigned to the event will cancel the current action. ● link A DOM Object with the link removed. |
file.uploaded (response) | Triggered after the file was uploaded. Note: Returning false in the handler assigned to the event will cancel the current action. ● link The original server response. |
file.uploadedToS3 (link, key, response) | Triggered after the file was uploaded to S3. ● link The link to the uploaded file. ● key The key of the uploaded file. ● response The original server response. |
Add Plugin to your code:
Plugin name: file
Plugin JS Script: ../js/plugins/file.min.js
Or from CDN https://cdn.jsdelivr.net/npm/froala-editor@latest/js/plugins/file.min.js
Plugin CSS link: ../css/plugins/file.min.css
Plugin CSS link https://cdn.jsdelivr.net/npm/froala-editor@latest/css/plugins/file.min.css
Storing files on your server:
To store files on your server you may need to use one of the following SDKs