---
title: "Uploader Module"
description: "The Jodit uploader module for sending files to the server, configured via the uploader namespace with hooks for data, responses and file names."
metadata:
  - name: keywords
    content: "jodit, uploader, file upload, upload files, ajax upload, drag and drop, server upload"
---
# File uploader module

The module for uploading files to the server is configured via the `uploader` namespace and has [IUploaderOptions](../interfaces/types.IUploaderOptions.html) options.

> These same options are used by default in [IFileBrowserOptions.uploader](../interfaces/types.IFileBrowserOptions.html#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.

```js
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](../classes/request.Ajax.html#defaultajaxoptions)
Type: {function} uploader.prepareData Before send file will called this function. First argument it gets
[new FormData ()](https://developer.mozilla.org/en/docs/Web/API/FormData), you can use this if you want add some POST
parameter.

### uploader.data

- Type: `object`|`boolean`
- Default: false

POST parameters

#### Example prepareData

```js
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:

```js
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.

```js
Jodit.make('#editor', {
  uploader: {
    url: 'some-connector.php',
    processFileName: (key, file, name) => {
      return [key, file, 'some-prefix_' + name];
    }
  }
});
```

### Example 1

```js
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

```js
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

```js
// 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

- [Uploader](../classes/uploader.Uploader.html)

### ajaxInstances

`const` **ajaxInstances**: [`WeakMap`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/WeakMap)\<[`IUploader`](../interfaces/types.IUploader.html), [`Set`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Set)\<[`Ajax`](../classes/request.Ajax.html)\>\>

Defined in: [src/modules/uploader/helpers/send.ts:16](https://github.com/xdan/jodit/blob/main/src/modules/uploader/helpers/send.ts#L16)

### buildData()

**buildData**(`uploader`, `data`): [`BuildDataResult`](./types.html#builddataresult)

Defined in: [src/modules/uploader/helpers/build-data.ts:14](https://github.com/xdan/jodit/blob/main/src/modules/uploader/helpers/build-data.ts#L14)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `uploader` | [`IUploader`](../interfaces/types.IUploader.html) |
| `data` | `string` \| [`IDictionary`](./types.html#idictionary)\<`string`\> \| [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData) |

#### Returns

[`BuildDataResult`](./types.html#builddataresult)

***

### dataURItoBlob()

**dataURItoBlob**(`dataURI`): [`Blob`](https://developer.mozilla.org/docs/Web/API/Blob)

Defined in: [src/modules/uploader/helpers/data-uri-to-blob.ts:16](https://github.com/xdan/jodit/blob/main/src/modules/uploader/helpers/data-uri-to-blob.ts#L16)

Convert dataURI to Blob. Both base64 and percent-encoded payloads are
supported — `data:image/svg+xml,%3Csvg...` is as valid as
`data:image/png;base64,...`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `dataURI` | `string` |

#### Returns

[`Blob`](https://developer.mozilla.org/docs/Web/API/Blob)

***

### hasFiles()

**hasFiles**(`data`): `data is DataTransfer`

Defined in: [src/modules/uploader/helpers/index.ts:19](https://github.com/xdan/jodit/blob/main/src/modules/uploader/helpers/index.ts#L19)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `data` | [`Nullable`](./types.html#nullable)\<[`DataTransfer`](https://developer.mozilla.org/docs/Web/API/DataTransfer)\> |

#### Returns

`data is DataTransfer`

***

### hasItems()

**hasItems**(`data`): `data is DataTransfer`

Defined in: [src/modules/uploader/helpers/index.ts:23](https://github.com/xdan/jodit/blob/main/src/modules/uploader/helpers/index.ts#L23)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `data` | [`Nullable`](./types.html#nullable)\<[`DataTransfer`](https://developer.mozilla.org/docs/Web/API/DataTransfer)\> |

#### Returns

`data is DataTransfer`

***

### processOldBrowserDrag()

**processOldBrowserDrag**(`self`, `cData`, `handlerSuccess?`, `handlerError?`, `onFinally?`): `void`

Defined in: [src/modules/uploader/helpers/process-old-browser-drag.ts:20](https://github.com/xdan/jodit/blob/main/src/modules/uploader/helpers/process-old-browser-drag.ts#L20)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `self` | [`IUploader`](../interfaces/types.IUploader.html) |
| `cData` | [`DataTransfer`](https://developer.mozilla.org/docs/Web/API/DataTransfer) \| `null` |
| `handlerSuccess?` | [`HandlerSuccess`](./types.html#handlersuccess) |
| `handlerError?` | [`HandlerError`](./types.html#handlererror) |
| `onFinally?` | () => `void` |

#### Returns

`void`

***

### sendFiles()

**sendFiles**(`uploader`, `files`, `handlerSuccess?`, `handlerError?`, `process?`): [`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\<`any`\>

Defined in: [src/modules/uploader/helpers/send-files.ts:23](https://github.com/xdan/jodit/blob/main/src/modules/uploader/helpers/send-files.ts#L23)

Send files to server

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `uploader` | [`IUploader`](../interfaces/types.IUploader.html) |
| `files` | [`FileList`](https://developer.mozilla.org/docs/Web/API/FileList) \| [`File`](https://developer.mozilla.org/docs/Web/API/File)[] \| `null` |
| `handlerSuccess?` | [`HandlerSuccess`](./types.html#handlersuccess) |
| `handlerError?` | [`HandlerError`](./types.html#handlererror) |
| `process?` | (`form`) => `void` |

#### Returns

[`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\<`any`\>

***

### send()

**send**(`uploader`, `data`): [`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\<[`IUploaderAnswer`](../interfaces/types.IUploaderAnswer.html)\>

Defined in: [src/modules/uploader/helpers/send.ts:18](https://github.com/xdan/jodit/blob/main/src/modules/uploader/helpers/send.ts#L18)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `uploader` | [`IUploader`](../interfaces/types.IUploader.html) |
| `data` | [`IDictionary`](./types.html#idictionary)\<`string`\> \| [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData) |

#### Returns

[`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\<[`IUploaderAnswer`](../interfaces/types.IUploaderAnswer.html)\>