Modifying XHR object in filetools plugin is painfull.

[Artur Delura]

Working on ticket:12612 we found out that we need to allow user to add flag withCredentials and some extra headers to XHR object in filetools plugins. Use case for this is to allow cross domain requests.

Following ​this example I tried to customize a bit my request object. I end up with:

CKEDITOR.replace( 'editor', function() {
  CKEDITOR.fileTools.fileLoader.prototype.sendRequest = function() {
	  var formData = new FormData(),
			xhr = this.xhr;

		formData.append( 'upload', this.file, this.fileName );
		xhr.withCredentials = true; // Extra lines
		xhr.setRequestHeader( 'X-PINGOTHER', 'pingpong' ); // Extra lines
		xhr.open( 'POST', this.uploadUrl, true );
		xhr.send( formData );
	};
} );

Shortcomings of this solution are:

• We overwrite global function sendRequest which influence all editor instances while optionimageUploadUrl is unique for all editor isntances.
• We have to wait for plugin to be loaded and editor instance as well to overwrite this method. If user have got a few editors he have to impelement special mechanism to overwrite this function when first editor instance is loaded. Or maybe there is a global event which fire when plugin is loaded?

We got at least two sulutions for this:

• We can add extra config option like:

  xhrData =  {
      withCredentials: true,
      headers: {
          'X-HEADER-NAME': "X-HEADER VALUE"
      }
  };
  

And function send request will take into consideration xhrData config options and set flag and headers. This is simples solution but don't allow user whole freedom.

• Second option is to fire events like prerequest which will have an xhr object as a property and user would make whatever he wants with this.