How it works

1. The image gets uploaded to your server.
2. When the image is stored to the disk on server side, it is also resized.

Jump to Complete Example

Image Upload

In the Server Upload article we explain the steps to upload image on your server. After you insert an image in the rich text editor, you can resize it, but this only changes the width and height displayed in the browser, and not the physical size of the image. That should be done on server side.

Resize Image

The WYSIWYG editor's Node.JS SDK comes with the possibility to resize the image when it is being stored on the disk. It is using the Node.JS GraphicsMagick library resize method, therefore all the options available for it can be used.

var options = {
  resize: [300, 300]
}

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

Complete Example

<script>
  new FroalaEditor('.selector', {
    // Set the image upload URL.
    imageUploadURL: '/image_upload',

    imageUploadParams: {
      id: 'my_editor'
    }
  })
</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 }));

app.post('/upload_image_resize', function (req, res) {
  var options = {
    resize: [300, 300]
  }

  FroalaEditor.Image.upload(req, '/uploads/', options, function(err, data) {

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