Не удается удалить изображение из сервера, когда оно удаляется из редактора tinyMCE в Angular
Я пытаюсь интегрировать редактор tinyMCE в мой сайт, точнее загрузку картинок. Я нашел решение, как загружать фото на сервер, когда пользователь загружает его в редактор. Но, если пользователь удаляет фото в редакторе, то оно уже загружено на сервер и продолжает оставаться там. Таким образом, сервер захламляется ненужными файлами.
Я нашел решение, как разу удалять фото из сервера, когда пользователь удаляет его в редакторе, чтобы не реализовывать потом логику поиска и удаления неиспользуемых картинок из сервера.
Вот компонент:
export class CreatePostComponent implements OnInit {
constructor(private router: Router, private postService: PostService,
private topicService: TopicService) {
}
this.tinymceInit = {
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor colorpicker textpattern"
],
toolbar: 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat | image |',
images_upload_handler: this.uploadImageToServer,
setup: function (ed: any) {
this.delete_image_from_editor(ed);
},
delete_image_from_editor: function (ed: any) {
ed.on('KeyDown', (e: any) => {
if ((e.keyCode == 8 || e.keyCode == 46) && tinymce.activeEditor.selection) { // delete & backspace keys
var selectedNode = tinymce.activeEditor.selection.getNode(); // get the selected node (element) in the editor
if (selectedNode && selectedNode.nodeName == 'IMG') {
console.log(selectedNode.src)
this.delete_image_from_server(selectedNode.src); // A callback that will let me invoke the deletion of the image on the server if appropriate for the image source.
}
}
});
},
delete_image_from_server: (src: string) => {
this.deleteImageFromServer(src)
}
}
}
uploadImageToServer (blobInfo: any, success: any, failure: any) {
var image_size = blobInfo.blob().size / 1000; // image size in kbytes
console.log('type - ' + blobInfo.blob().type)
var max_size = 100 // max size in kbytes
if (image_size > max_size) {
failure('Image is too large( ' + image_size + ') ,Maximum image size is:' + max_size + ' kB');
return;
}
var xhr: XMLHttpRequest, formData;
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', 'http://localhost:8080/api/posts/upload/image');
xhr.onload = function () {
var json;
if (xhr.status != 200) {
failure('Error: ' + +xhr.status + ' Something went wrong!');
//failure('HTTP Error: ' + xhr.status);
return;
}
json = xhr.responseText;
success(json);
};
formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
xhr.send(formData);
}
deleteImageFromServer(src: string) {
this.postService.deleteImage(src)
}
Вот сервис:
export class PostService {
constructor(private http: HttpClient, private localStorage: LocalStorageService) {
}
deleteImage(path: string) {
this.http.delete("http://localhost:8080/api/posts/upload/image/" + path);
}
Но есть проблемы:
Удаление не работает, так как метод "deleteImageFromServer(src: string)" не триггерится. Я не могу использовать this.postService.deleteImage(src) напрямую. Если же мне как-то удается запустить этот метод, то он падает в сервис классе вот здесь: "this.http.delete("http://localhost:8080/api/posts/upload/image/" + path);". Вопрос, как мне использовать сервис класс в 'tinymceInit'?
Вторая проблема связана с предыдущей, сервер требует авторизацию, но я не могу внедрить JWT токен в метод загрузки картинок на сервер "uploadImageToServer" внутри "tinymceInit" Т.к. токен находится в localStorage опять же внутри сервис класса. Как мне это сделать? или как вообще использовать вместо http запросов внутри 'uploadImageToServer' метода : "xhr = new XMLHttpRequest(); xhr.withCredentials = false; xhr.open('POST', 'http://localhost:8080/api/posts/upload/image');", метод из сервис класса, чтобы не возиться с JWT токеном.
И в третьих, возможно ли загружать изображение на сервер не после того, как пользователь загрузит изображение на сервер, а после сабмита формы? тогда не придется реализовывать логику удаления изображений с сервера вообще, т.к. ненужные картинки просто не будут загружаться.
Где моя ошибка? Благодарю за помощь