Search code examples
wysiwygfroalaangular-cli-v7

froalaEditor.file.beforeUpload Event not firing


I'm attempting implement the custom file upload feature of the Angular Froala WYSIWYS Editor. I've pasted my configuration options below.

In the console, I can see that both the froalaEditor.file.beforeUpload and froalaEditor.file.inserted events are triggered, but no HTTP action of any kind is fired and neither the froalaEditor.file.uploaded nor the froalaEditor.file.error events are triggered.

Does any know why Froala is not attempting to POST to my fileUploadUrl?

options: Object = {
fileUploadUrl: 'https://localhost:5001/api/file',
events: {
  'froalaEditor.file.beforeUpload': function (e: any, editor: any, files: any) {
    console.log('BEFORE UPLOAD', e, editor, files, files[0]);
  },
  'froalaEditor.file.inserted': function (e, editor, $file, response) {
    console.log('INSERTED', e, editor, $file, response);
  },
  'froalaEditor.file.uploaded': function (e, editor, response) {
    console.log('UPLOADED', e, editor, response);
  },
  'froalaEditor.file.error': function (e, editor, error, response) {
    console.log('ERROR', e, editor, error, response);
  },
}}

Version Info:

Angular CLI: 7.3.0

angular-froala-wysiwyg: "^2.9.1"


Solution

  • 1) While using command froalaEditor.file.beforeUpload and froalaEditor.file.inserted, if you wish to see the HTTP response on your URL kindly have the following property included -

    fileUploadMethod: 'POST'
    

    2) Events can be triggered using -

    console.log("Custom Message")
    

    Refer JSFiddle - https://jsfiddle.net/dyt52pqk/2/