Не удается удалить изображение из сервера, когда оно удаляется из редактора 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);
  }

Но есть проблемы:

  1. Удаление не работает, так как метод "deleteImageFromServer(src: string)" не триггерится. Я не могу использовать this.postService.deleteImage(src) напрямую. Если же мне как-то удается запустить этот метод, то он падает в сервис классе вот здесь: "this.http.delete("http://localhost:8080/api/posts/upload/image/" + path);". Вопрос, как мне использовать сервис класс в 'tinymceInit'?

  2. Вторая проблема связана с предыдущей, сервер требует авторизацию, но я не могу внедрить JWT токен в метод загрузки картинок на сервер "uploadImageToServer" внутри "tinymceInit" Т.к. токен находится в localStorage опять же внутри сервис класса. Как мне это сделать? или как вообще использовать вместо http запросов внутри 'uploadImageToServer' метода : "xhr = new XMLHttpRequest(); xhr.withCredentials = false; xhr.open('POST', 'http://localhost:8080/api/posts/upload/image');", метод из сервис класса, чтобы не возиться с JWT токеном.

  3. И в третьих, возможно ли загружать изображение на сервер не после того, как пользователь загрузит изображение на сервер, а после сабмита формы? тогда не придется реализовывать логику удаления изображений с сервера вообще, т.к. ненужные картинки просто не будут загружаться.

Где моя ошибка? Благодарю за помощь


Ответы (0 шт):