Days
Hours
Minutes
Seconds
x

Froala Editor v4.2.0 is Here LEARN MORE

Skip to content

Files Manager

File manager plugin allows users to upload any type of file not just images through an uploading button, drag-and-drop, URL, or embedding code. You can use it to upload single or multiple files simultaneously. It enables users also to insert, view, and delete the uploaded files.


Plugin options:

filesManagerAllowedTypes
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.
filesManagerMaxSize
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.
filesManagerUploadParams
Object - Default: {}
Pass additional parameters to the file upload request.
filesManagerUploadToS3
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.
filesManagerUploadURL
String - Default:'http://i.froala.com/upload'
The URL where the files uploaded by the user are saved. When a file is uploaded, the editor sends the file to the server through a HTTP request. The server should process the data from the file parameter of the request and return a JSON object containing a link field with the link to the uploaded file.

Plugin events:

filesManager.beforeUpload (files)
Triggered before uploading a file to the server.

● files: An array with the files to be uploaded.
filesManager.error (error, response)
Triggered before 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.
filesManager.uploaded (response)
Triggered after the file was uploaded.
Note: Returning false in the handler assigned to the event will cancel the current action.
● response The original server response.
filesManager.uploadedToS3 (link, key, response)
Triggered after the file was uploaded to S3.
Note: Returning false in the handler assigned to the event will cancel the current action.
● 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: filesManager

Plugin JS Script: ../js/plugins/files_manager.min.js

Or from CDN https://cdn.jsdelivr.net/npm/froala-editor@latest/js/plugins/files_manager.min.js

Example:

Files Manager

Ready to dive in? Explore our plans

[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1622531835" 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_995224907" 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_169416498" 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>