Grapesjs: Override uploadFile function ?

[FlashPapa]

Hi,
Is it possible to do override uploadFile function ?
Thanks

[artf]

Currently, is not possible, but I'd accept a PR for this

[roytang]

I spent some time looking for a workaround for this since it wasn't possible directly.

My workaround was to add an event on open of the asset manager (editor.on('run:open-assets', ...)), where I changed the "ondrop" handler of the form element to use my own upload function. I also changed the id of the file input element (since the old change handler was tied to the specific id), and attached my upload function there.

Something like this:

function uploadFile(e) {
var files = e.dataTransfer ? e.dataTransfer.files : e.target.files;
.[... your custom upload logic ]
}

// modify the upload functionality
// When the Asset Manager modal is opened
editor.on('run:open-assets', () => {
if (editor.uploaderModified) {
return;
} else {
const modal = editor.Modal;
const modalBody = modal.getContentEl();
const uploader = modalBody.querySelector('.gjs-am-file-uploader');
const uploadInput = modalBody.querySelector("#gjs-am-uploadFile");

  var uploadForm = $(uploader).find("form").get(0);
  uploadForm.ondrop = function(e) {
    this.className = '';
e.preventDefault();
    uploadFile(e);
    return;
  }
  // change the id of the upload input
  // this turns off the old change handler bound to that id
  // (so that it no longer sends needless requests to /assets/upload)
  // but also turns off the stylesheet so we have to replace the css
  $(uploadInput).attr("id", "dummy");
  $(uploadInput).css("opacity", "0")
    .css("filter", "alpha(opacity=0)")
    .css("padding", "150px 10px")
    .css("width", "100%")
    .css("box-sizing", "border-box");

  $(uploadInput).change(uploadFile);
  editor.uploaderModified = true;
}

});

Hope that helps!

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.