Image upload params in react froala wysiwyg-editor

Question

I was used ReactJS version of Froala WYSIWYG Editor. When I use Image Upload feature, I can't get the params at server request.

This is config:

this.config = {
    // Set the image upload parameter.
    imageUploadParam: 'image',

    // Set the image upload URL.
    imageUploadURL: apiUrl + "/api/v1/admin/upload/image",

    // Additional upload params.
    imageUploadParams: {
        token: cookie.getItem('token'),
        test_id: '11',
    },

    // Set request type.
    imageUploadMethod: 'POST',

    // Set max image size to 2MB.
    imageMaxSize: 2 * 1024 * 1024,

    // Allow to upload PNG and JPG.
    imageAllowedTypes: ['jpeg', 'jpg', 'png', 'gif'],
}

When uploading an image I receive the following message:

{"code":403,"message":"Token is not valid!"}

I checked the request entry:

console.log(request.body);

Result: {}

console.log(request.query);

Result: {}

console.log(request.params);

Result: {}

Did I miss something or is the Config section wrong?

Ryan Mckenna Ryan Mckenna · Accepted Answer · 2020-04-17T20:43:07

Junaid Babatunde wrote a great article on this, Here is the link: https://medium.com/@junaidtunde1/angular-2-with-froala-text-editor-image-upload-to-remote-server-732ef2793356

The default image upload is intercepted with a 'beforeUpload' event where you can send it to the database and then in the callback insert the image (from the database) into the editor, the original copy is thrown away after being sent to the database which is the copy that is then inserted in to the editor.

By the way - imageUpload: true is obviously needed!

Here is the code:

options: Object = {
    charCounterCount: false,
    placeholderText: 'Edit Your Content Here!',
    imageUpload: true,
    imageDefaultAlign: 'left',
    imageDefaultDisplay: 'inline-block',
    // Set max image size to 5MB.
    imageMaxSize: 5 * 1024 * 1024,
    // Allow to upload PNG and JPG.
    imageAllowedTypes: ['jpeg', 'jpg', 'png'],
    events: {
      'froalaEditor.image.beforeUpload': function(e, editor, images) {
        // Before image is uploaded
        const data = new FormData();
        data.append('image', images[0]);

        axios.post('your_imgur_api_url', data, {
          headers: {
            'accept': 'application/json',
            'Authorization': 'your_imgur_client_id/api_key',
            'Accept-Language': 'en-US,en;q=0.8',
            'Content-Type': `multipart/form-data; boundary=${data._boundary}`,
          }
        }).then(res => {
          editor.image.insert(res.data.data.link, null, null, editor.image.get());
        }).catch(err => {
          console.log(err);
        });
        return false;
      }
    }
  };

Image upload params in react froala wysiwyg-editor

2 Answers