[VanillaJs] Trix v0.11.1 Toolbar attachment file button

wysiwyg.css

.trix-button--icon-attach-files::before {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA%2FPjxzdmcgaGVpZ2h0PSIxNnB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNCAxNiIgd2lkdGg9IjI0cHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZXNjLz48ZGVmcy8%2BPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSI%2BPGcgZmlsbD0iIzAwMDAwMCIgaWQ9IkNvcmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMjYuMDAwMDAwLCAtNDYuMDAwMDAwKSI%2BPGcgaWQ9ImJhY2t1cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTI2LjAwMDAwMCwgNDYuMDAwMDAwKSI%2BPHBhdGggZD0iTTE5LjQsNiBDMTguNywyLjYgMTUuNywwIDEyLDAgQzkuMSwwIDYuNiwxLjYgNS40LDQgQzIuMyw0LjQgMCw2LjkgMCwxMCBDMCwxMy4zIDIuNywxNiA2LDE2IEwxOSwxNiBDMjEuOCwxNiAyNCwxMy44IDI0LDExIEMyNCw4LjQgMjEuOSw2LjIgMTkuNCw2IEwxOS40LDYgWiBNMTQsOSBMMTQsMTMgTDEwLDEzIEwxMCw5IEw3LDkgTDEyLDQgTDE3LDkgTDE0LDkgTDE0LDkgWiIgaWQ9IlNoYXBlIi8%2BPC9nPjwvZz48L2c%2BPC9zdmc%2B);
}

wysiwyg.js

;(function ($, window, document, undefined) {

  var wysiwyg = {
    serverPath: "/attachments",
    fileMaxSize: 2097152, // 2MB

    config: function () {
      _trixAddAttachmentButtonToToolbar();

      document.addEventListener("trix-attachment-add", _trixAttachmentAdd);
      document.addEventListener("trix-attachment-remove", _trixAttachmentRemove);
    },

    addFile: function () {
      var trix = document.querySelector("trix-editor");
      var fileInput = document.createElement("input");

      fileInput.setAttribute("type", "file");
      fileInput.setAttribute("multiple", "");

      fileInput.addEventListener("change", function(event) {
        var files = this.files;
        var results = [];
        var filesCounter = files.length;

        for (var i = 0; i < filesCounter; i++) {
          results.push(trix.editor.insertFile(files[i]));
        }

        return results;
      }),

      fileInput.click();
    }
  };

  window.app.wysiwyg = wysiwyg;

  // ****************************** PROTECTED **********************************

  function _trixAddAttachmentButtonToToolbar() {
    var buttonHTML = '<button type="button" onclick="return app.wysiwyg.addFile();" class="trix-button trix-button--icon trix-button--icon-attach-files" data-trix-action="x-attach" title="Attach Files" tabindex="-1">Attach Files</button>';
    var nth = 0;

    var newtoolbarHTML = Trix.config.toolbar.getDefaultHTML().replace(/<\/span>/g, function (match, i) {
      return (++nth === 2) ? buttonHTML + '</span>' : match;
    });

    Trix.config.toolbar.getDefaultHTML = function () {
      return newtoolbarHTML;
    };
  }

  function _trixAttachmentAdd(event) {
    var attachment = event.attachment;
    var xhr = new XMLHttpRequest;
    var form = new FormData;
    var file = attachment.file;
    var CSRFToken = $('meta[name="csrf-token"]').attr('content');

    if (!file || file.size === 0) {
      attachment.remove();

      return alert("The file you submitted looks empty.");;
    }

    if (file.size > wysiwyg.fileMaxSize) {
      attachment.remove();

      return alert("The selected file is bigger then the allowed max file size.");
    }

    form.append("attachment[file]", file);

    xhr.open("POST", wysiwyg.serverPath, true);
    xhr.setRequestHeader('X-CSRF-Token', CSRFToken);

    xhr.upload.onprogress = function(event) {
      var progress = event.loaded / event.total * 100;

      return attachment.setUploadProgress(progress);
    };

    xhr.onload = function() {
      if (xhr.status >= 200 && xhr.status < 300) {
        var data = JSON.parse(xhr.responseText);

        data.href = data.url;

        return attachment.setAttributes(data);
      } else {
        attachment.remove();

        alert("Upload failed. Try to reload the page.");
      }
    };

    return xhr.send(form);
  };

  function _trixAttachmentRemove(event) {
    var attachment = event.attachment;
    var data = attachment.getAttributes();

    if (!data.id) { return false; }

    $.ajax({ url: wysiwyg.serverPath + "/" + data.id, type: "delete" });
  }

})(jQuery, window, document);

window.app.wysiwyg.config();