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

BuildDataResult

Defined in

src/modules/uploader/helpers/build-data.ts#14


dataURItoBlob

dataURItoBlob(dataURI): Blob

Convert dataURI to Blob

Parameters

Name Type
dataURI string

Returns

Blob

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#19


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

Promise<IUploaderAnswer>

Defined in

jodit/src/modules/uploader/helpers/send.ts:18