Days
Hours
Minutes
Seconds
x

New Advanced File Management – Learn More

Skip to content

Node.JS File Server Upload

How it works

  1. Specify upload options when initializing the editor.
  2. On file insertion, the editor automatically makes an AJAX request to the server.
  3. Once the request reaches the server, it stores the file and sends back to the client the link to the uploaded file.

Jump to Complete Example

Initialize the editor

First, set the fileUploadURL option and specify the URL destination for the uploaded files.

Next, set any additional options to configure upload methods and allowed file types: fileUploadParam, fileUploadParams, fileUploadMethod, fileMaxSize, fileAllowedTypes.

<script>
  new FroalaEditor('.selector', {
    // Set the file upload URL.
    fileUploadURL: '/upload_file'
  })
</script>

Receive the uploaded file and store it

The server implementation is responsible for receiving the request and handling it appropriately. In Node.JS, the uploaded file is available in the request received by your application. The Node.JS editor SDK detects the uploaded file automatically but you have to specify the path where to store it.

Note: The path of the file is relative to the root of your application.

FroalaEditor.File.upload(req, '/uploads/', function (err, data) { ... });

To store the uploaded file, the server needs write rights on the uploads folder. Additionally, check uploaded files are publicly accessible in the browser.

Return the path to the uploaded file

If the save action is successful, the SDK generates a FileResponse object with the absolute path to the uploaded file, and the server returns the path to the client side.

if (err) {
  return res.send(JSON.stringify(err));
}

res.send(data);

Complete Example

<script>
  new FroalaEditor('.selector', {
    // Set the file upload URL.
    fileUploadURL: '/upload_file'
  })
</script>
var express = require('express');
var app = express();
var bodyParser = require('body-parser')
var path = require('path');
var fs = require('fs');
var FroalaEditor = require('PATH_TO_FROALA_SDK/lib/froalaEditor.js');

app.use(express.static(__dirname + '/'));
app.use('/bower_components',  express.static(path.join(__dirname, '../bower_components')));
app.use(bodyParser.urlencoded({ extended: false }));

// Path to upload file.
app.post('/upload_file', function (req, res) {

  // Store file.
  FroalaEditor.File.upload(req, '/uploads/', function(err, data) {
    // Return data.
    if (err) {
      return res.send(JSON.stringify(err));
    }

    res.send(data);
  });
});

Do you think we can improve this article? Let us know.