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.