javascript - TinyMCE 5 file_picker_callback 使用自定义处理程序上传

Question

我正在使用 TinyMCE 5 和 PHP 7。

当前:

1。 images_upload_handler(工作)

遵循TinyMCE guide on Drag-in uploading images ，以及我自己的 PHP 上传 AJAX 处理程序，我成功将图像上传到我的上传目录:

• 这会使用 AJAX 正确上传文件并保留正确的名称。
• 它使用 images_upload_handler 函数来调用我的 AJAX 处理程序。

2。 file_picker_callback(不完整)

遵循TinyMCE demo on uploading files ，我使用这两个工具栏按钮(image、media)在其对话框中显示上传按钮:

• 这适用于图像，不适用于媒体。
• 它使用file_picker_callback函数，以自己的方式上传。

3。问题

我无法从 2. 获取 file_picker_callback 来从 media 上传，而且我希望它使用我自己的 AJAX 上传处理程序，但我不能。

使用image工具上传，在对话框中点击“保存”后会保存文件。但是，当在 media 工具中使用时，它根本不会上传或插入任何内容。

TinyMCE 提供的这个 JavaScript 演示似乎与 TinyMCE API 本身有很大的交互。它有一个缓存和 blob 系统来查找 TinyMCE 自行上传的文件。因此，纯粹的 AJAX-JS 知识不足以告诉我如何告诉 TinyMCE 使用我自己的 AJAX 上传 PHP 文件。我宁愿在 file_picker_callback 中重写 TinyMCE 的上传处理程序，这样我就可以使用自己的 PHP 上传脚本来与我的应用程序的其余部分兼容。

目标:

我需要一个用于 file_picker_callback(文件上传按钮)的函数来使用我自己的 AJAX 上传处理程序并保留名称，就像 images_upload_handler 成功完成的那样。

• 我不担心文件名和 mimetype 验证；我计划稍后让 PHP 进行清理和过滤。
• This Question解决了另一个文件 uploader 以及 TinyMCE 4 解决方案并不总是与 TinyMCE 5 配合使用的问题。
• This Question是关于图像描述的，并且仅适用于图像；我想上传任何文件类型。
• 我不想要任何依赖项，甚至不需要 jQuery。仅适用于 Vanilla JS。

---

当前代码:

| 上传.php:

$temp_file = $_FILES['file']['tmp_name'];

$file_path_dest =  'uploads/'.$_FILES['file']['name'];

move_uploaded_file($temp_file, $file_path_dest);

$json_file_is_here = json_encode(array('filepath' => $file_path_dest));

echo $json_file_is_here;

| tinyinit.js:

tinymce.init({
  selector: 'textarea',
  plugins: [ 'image media imagetools', ],

  automatic_uploads: true,
  images_reuse_filename: true,
  images_upload_url: 'upload.php',

  // From #1. Successful AJAX Upload
  images_upload_handler: function(fileHere, success, fail) {

    var ajax = new XMLHttpRequest();
    ajax.withCredentials = false;
    ajax.open('post', 'upload.php');
    ajax.upload.onprogress = function (e) {
      progress(e.loaded / e.total * 100);
    };

    ajax.onload = function() {

      if (ajax.status == 200) {

        if ( (!JSON.parse(ajax.responseText))
        || (typeof JSON.parse(ajax.responseText).filepath != 'string') ) {
          fail('Invalid: <code>'+ajax.responseText+'</code>');
          return;
        }

        success(JSON.parse(ajax.responseText).filepath);

        } else {
          fail('Upload error: <code>'+ajax.status+'</code>');
          return;
        }

      };

      var fileInfo = new FormData();
      fileInfo.append('file', fileHere.blob(), fileHere.filename());
      ajax.send(fileInfo);

    },


  file_browser_callback_types: 'file image media',
  file_picker_types: 'file image media',

  // From #2. Neither uploads from "media" nor uses my upload handler
  file_picker_callback: function(cb, value, meta) {
    var input = document.createElement('input');
    input.setAttribute('type', 'file');

    input.onchange = function() {
      var file = this.files[0];

      var reader = new FileReader();
      reader.onload = function () {
        var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
        var base64 = reader.result.split(',')[1];
        var blobInfo = blobCache.create(file.name, file, base64);
        blobCache.add(blobInfo);
        cb(blobInfo.blobUri(), { title: file.name });
      };
      reader.readAsDataURL(file);
    };
    input.click();
  }
});

Answer 1

编辑@Aulia的答案:

file_picker_callback: function (cb, value, meta) {
    var input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.onchange = function () {
        var file = this.files[0];
        var reader = new FileReader();
                        
        // FormData
        var fd = new FormData();
        var files = file;
        fd.append('filetype',meta.filetype);
        fd.append("file",files);

        var filename = "";

        // AJAX
        var xhr, formData;
        xhr = new XMLHttpRequest();
        xhr.withCredentials = false;
        xhr.open('POST', '/your-endpoint');

        xhr.onload = function() {
            var json;
            if (xhr.status != 200) {
                alert('HTTP Error: ' + xhr.status);
                return;
            }
            json = JSON.parse(xhr.responseText);
            if (!json || typeof json.location != 'string') {
                alert('Invalid JSON: ' + xhr.responseText);
                return;
            }
            filename = json.location;
            reader.onload = function(e) {
                cb(filename);
            };
            reader.readAsDataURL(file);
        };
        xhr.send(fd);
        return
    };

    input.click();
}