File uploader module
The module for uploading files to the server is configured via the uploader namespace and has IUploaderOptions options.
These same options are used by default in IFileBrowserOptions.uploader but can be overridden.
Here are some of them:
uploader.url
- Type: 
string 
Point of entry for file uploader. This is a required parameter.
Jodit.make('#editor', {
  uploader: {
    url: 'https://stitename.com/connector/index.php?action=upload'
  }
});
        
    uploader.format
- Type: 
string - Default: 'json'
 
The format of the received data
uploader.headers
- Type: 
string - Default: null
 
An object of additional header key/value pairs to send along with
requests using the XMLHttpRequest transport. See Ajax.defaultAjaxOptions
Type: {function} uploader.prepareData Before send file will called this function. First argument it gets
new FormData (), you can use this if you want add some POST
parameter.
uploader.data
- Type: 
object|boolean - Default: false
 
POST parameters
Example prepareData
Jodit.make('#editor', {
  uploader: {
    url: 'connector/index.php?action=upload', // This is a required parameter
    prepareData: function (formdata) {
      formdata.append('id', 24); // $_POST['id'] on server
      formdata.append('name', 'Some parameter'); // $_POST['name'] on server
    }
  }
});
        
    uploader.isSuccess
- Type: 
function 
Check if received data was positive
uploader.getMessage
- Type: 
function 
If you need display a message use this
uploader.process
- Type: 
function 
The method of processing data received from the server. Must return special object:
const process = resp => ({
  files: resp.files || [], // {array} The names of uploaded files.
  path: resp.path, // {string} Real relative path
  baseurl: resp.baseurl, // {string} Base url for filebrowser
  error: resp.error, // {int}
  msg: resp.msg // {string}
});
        
    uploader.error
- Type: 
function 
Process negative situation. For example file wasn't uploaded because of file permission
uploader.defaultHandlerSuccess
- Type: 
function 
Default success result processor. In first param it get uploader.process result
uploader.defaultHandlerError
- Type: 
function 
Default error result processor.
uploader.processFileName
- Type: 
function - Default: 
(key, file, name) => [key, file, name] 
The method can be used to change the name of the uploaded file.
Jodit.make('#editor', {
  uploader: {
    url: 'some-connector.php',
    processFileName: (key, file, name) => {
      return [key, file, 'some-prefix_' + name];
    }
  }
});
        
    Example 1
var editor = Jodit.make('#editor', {
  uploader: {
    url: 'connector/index.php?action=upload',
    format: 'json',
    headers: {
      'X-CSRF-Token': document
        .querySelector('meta[name="csrf-token"]')
        .getAttribute('content')
    },
    prepareData: function (data) {
      data.append('id', 24); //
    },
    buildData: function (data) {
      return { some: 'data' };
    },
    data: {
      csrf: document
        .querySelector('meta[name="csrf-token"]')
        .getAttribute('content')
    },
    isSuccess: function (resp) {
      return !resp.error;
    },
    getMessage: function (resp) {
      return resp.msg;
    },
    process: function (resp) {
      return {
        files: resp.files || [],
        path: resp.path,
        baseurl: resp.baseurl,
        error: resp.error,
        msg: resp.msg
      };
    },
    defaultHandlerSuccess: function (data, resp) {
      var i,
        field = 'files';
      if (data[field] && data[field].length) {
        for (i = 0; i < data[field].length; i += 1) {
          this.s.insertImage(data.baseurl + data[field][i]);
        }
      }
    },
    error: function (e) {
      this.message.message(e.getMessage(), 'error', 4000);
    }
  }
});
        
    Example 2
Jodit.make('#editor', {
  uploader: {
    url: 'https://sitename.com/jodit/connector/index.php?action=fileUpload',
    queryBuild: function (data) {
      return JSON.stringify(data);
    },
    contentType: function () {
      return 'application/json';
    },
    buildData: function (data) {
      return { hello: 'Hello world' };
    }
  }
});
        
    Example 3
// buildData can return Promise
// this example demonstrate how send file like as base64 text. Work only in Firefox and Chrome
const editor = Jodit.make('#editor', {
  uploader: {
    url: 'index.php?action=fileUpload',
    queryBuild: function (data) {
      return JSON.stringify(data);
    },
    contentType: function () {
      return 'application/json';
    },
    buildData: function (data) {
      return new Promise(function (resolve, reject) {
        var reader = new FileReader();
        reader.readAsDataURL(data.getAll('files[0]')[0]);
        reader.onload = function () {
          return resolve({
            image: reader.result
          });
        };
        reader.onerror = function (error) {
          reject(error);
        };
      });
    }
  }
});
        
    Classes
ajaxInstances
Const ajaxInstances: WeakMap<IUploader, Set<Ajax>>
Defined in
src/modules/uploader/helpers/send.ts#16
buildData
buildData(uploader, data): BuildDataResult
Parameters
| Name | Type | 
|---|---|
uploader | 
IUploader | 
data | 
string | IDictionary<string> | FormData | 
Returns
Defined in
src/modules/uploader/helpers/build-data.ts#14
dataURItoBlob
dataURItoBlob(dataURI): Blob
Convert dataURI to Blob
Parameters
| Name | Type | 
|---|---|
dataURI | 
string | 
Returns
Defined in
src/modules/uploader/helpers/data-uri-to-blob.ts#14
hasFiles
hasFiles(data): data is DataTransfer
Parameters
| Name | Type | 
|---|---|
data | 
Nullable<DataTransfer> | 
Returns
data is DataTransfer
Defined in
src/modules/uploader/helpers/index.ts#19
hasItems
hasItems(data): data is DataTransfer
Parameters
| Name | Type | 
|---|---|
data | 
Nullable<DataTransfer> | 
Returns
data is DataTransfer
Defined in
src/modules/uploader/helpers/index.ts#23
processOldBrowserDrag
processOldBrowserDrag(self, cData, handlerSuccess?, handlerError?, onFinally?): void
Parameters
| Name | Type | 
|---|---|
self | 
IUploader | 
cData | 
null | DataTransfer | 
handlerSuccess? | 
HandlerSuccess | 
handlerError? | 
HandlerError | 
onFinally? | 
() => void | 
Returns
void
Defined in
src/modules/uploader/helpers/process-old-browser-drag.ts#20
sendFiles
sendFiles(uploader, files, handlerSuccess?, handlerError?, process?): Promise<any>
Send files to server
Parameters
| Name | Type | 
|---|---|
uploader | 
IUploader | 
files | 
null | FileList | File[] | 
handlerSuccess? | 
HandlerSuccess | 
handlerError? | 
HandlerError | 
process? | 
(form: FormData) => void | 
Returns
Promise<any>
Defined in
src/modules/uploader/helpers/send-files.ts#23
send
send(uploader, data): Promise<IUploaderAnswer>
Parameters
| Name | Type | 
|---|---|
uploader | 
IUploader | 
data | 
IDictionary<string> | FormData | 
Returns
Defined in
jodit/src/modules/uploader/helpers/send.ts:18