Froala Editor fails to call the API to upload images on the DEV server but works fine on LOCAL

Viewed 20

I Am Getting some weird issues with Froala Editor that - on local, being able to call the API to upload the image but when I deploy to the dev server, it's not calling the API to upload the image. It's just replacing the src URL with local blob storage as shown below,

<img src="blob:https://HOST_NAME/8b8b8ca0-246f-406b-8ac1-472e200ddc3f" class="fr-fic fr-dib">

Basically, it's not triggering the image.beforeUpload on the server I guess.

The code is as shown below,

export class FroalaEditorOptions {
  static create(token: string, placeholder: string = '', height: number): Object {
    const options = {
      key: 'KEY',
      placeholder: "Editor",
      imageUpload: true,
      imageAllowedTypes: ['jpeg', 'jpg', 'png'],
      imageDefaultWidth: 0,
      imageEditButtons: ['imageDisplay', 'imageAlign', 'imageRemove'],
      height: height,
      placeholderText: placeholder,
      imageMove: true,
      zIndex: 9990,
      attribution: false,
      codeMirror: false,
      toolbarButtons: {
        'moreText': {
          'buttons': ['bold', 'italic', 'underline']
        },
        'moreParagraph': {
          'buttons': ['alignLeft', 'alignCenter']
        },
        'moreMisc': {
          'buttons': ['html', 'codeView'],
          'align': 'right',
          'buttonsVisible': 2
        }
      },
      quickInsertTags: [''],
      events: {
        "image.beforeUpload": function (files) {
          const formData = new FormData();
          formData.append('File', files[0]);
          const url = 'URL_HERE';
          fetch(url, {
            method: 'POST',
            headers: {
              'Subscription-Key': '',
              'token': token
            },
            body: formData
          })
            .then(response => {
              return response.json();
            })
            .then(url => {
              this.image.insert(url, null, null, this.image.get());
            })
            .catch(err => { });
            return false;
        },
        "image.error": function (error, response) {
          if (error.code == 1) {  }
        }
      }
    };

    return options;
  }
}

Why am able to call API to upload on local but not when I deploy to the dev server? Any help will be really appreciated.

0 Answers
Related