Can I modify the imageUploadURL/imageUploadParams at beforeUpload event ?

[issaTan]

I need to get the params from the server every time before upload, but I can not get the options in the beforeUpload event.

[stefanneculai]

Yes, you can do it like this:

editor.opts.imageUploadURL = '/my/new-url';

[issaTan]

@stefanneculai Thx! Another question: can I return a Promise in beforeUpload? I use the vue-froala-wysiwyg , and my code like this:

editorConfig () {
      return {
        placeholderText: '请填写课时内容',
        charCounterCount: false,
        height: 300,
        language: 'zh_cn',
        imageUploadURL: '',
        imageUploadParams: {},
        events: {
          'froalaEditor.image.beforeUpload': (e, editor) => {
            return new Promise((resolve, reject) => {
              getLessonVideoUploadParamsAPI(this.id).then(data => {
                editor.opts.imageUploadParams.policy = data.policy
                editor.opts.imageUploadParams.OSSAccessKeyId = data.accessId
                editor.opts.imageUploadParams.signature = data.signature
                editor.opts.imageUploadParams.key = data.keyName
                editor.opts.imageUploadURL = data.host
                return resolve(data)
              })
            })
          }
        }
      }
    }

but it doesn't work ? I console the editor.opts.imageUploadURL, it change to the data.host, but it still post to localhost.

[kristian-puccio]

Is it possible to re-open this ticket? I think this is mandatory for doing S3 pre-signing.

[markedmondson]

@kristian-puccio It is kind of possible to do S3 pre-signing. Incomplete psuedo-code:

// Return whether there's an existing valid policy
function policyValid() {
  return typeof editor.opts.policy_expires_at !== 'undefined' && editor.opts.policy_expires_at > new Date();
}

function getSignature(callback) {
  $.ajax({
    type: "POST",
    url: editor.opts.asset_policy_path,
    data: {
      ...
    }
  }).done(function(data) {
    editor.opts.policy_expires_at = new Date(new Date().getTime() + editor.opts.policy_expiry_time);
    editor.opts.imageUploadToS3.keyStart = data.signature.key;
    editor.opts.imageUploadToS3.params.policy = data.signature.policy;
    editor.opts.imageUploadToS3.params.signature = data.signature.signature;
    callback();
  }).fail(function(jqXHR) {
    editor.events.trigger('image.error', [
      {
        code: 0,
        message: "There was an error fetching the secure settings"
      },
      null,
      null
    ]);
  });
}

editor.events.on('image.beforeUpload', function (images) {
  // If the policy is already valid, just allow the upload
  var policy_valid = policyValid();
  if (policy_valid) {
    return true;
  }
  getSignature(function() {
    // Manually trigger a fileupload now the settings are defined
    editor.events.disableBlur();
    editor.image.upload(images);
    editor.events.enableBlur();
  });
  // Return false to stop the initial file upload
  return false;
});

It's a kind of similar process for integrating Rails ActiveStorage where you have to hijack the image.beforeUpload and return false. I'm sure there could be a slightly more elegant way, @stefanneculai have you any ideas around this?

[kristian-puccio]

@markedmondson Thanks!

we ended up buying the SASS version of Froala and got the source code. I ended up just modifying the image/file + video plugins to suit.

I didn't really do it in the neatest way though, otherwise I would have created a pull request.

[talal7860]

@kristian-puccio , I know it's old, but I'm trying to upload but as soon as I enter the promise, I lose reference to the FileList images, did you run in this problem?

[kristian-puccio]

@talal7860 Yeah I did but it wasn't easy! I got hold of the source files and then modified the vide/image and file plugins to accept the option

[talal7860]

I do have to source files, as I have saas license, I know I can add the options, but I keep losing reference to the list of files returned in the events as soon as I enter a promise or callback. Did you by any chance run into this problem?

[markedmondson]

Any idea what the commit in 3.0.5 is that references this issue?

[kristian-puccio]

@talal7860 what I do is pretty ugly. In the function upload. I changed getUrl to be a promise, then insert some code to resolve the AWS url. then I change it so the code that calls _startUpload happens in the "then" of getting a url. It's super ugly and it makes upgrading Froala a pain as I have to run a diff against the new file