---
title: "File Selector Widget"
description: "A Jodit widget that lets users pick a file by browsing the file browser or uploading a new one, returning the chosen URL to a callback."
metadata:
  - name: keywords
    content: "jodit, file selector widget, file browser, file upload, image picker, jodit widget"
---
# File Selector widgets

```javascript
const jodit = Jodit.make('#editor', {
  filebrowser: {
    ajax: {
      url: 'https://xdsoft.net/jodit/connector/index.php?action=fileUpload'
    }
  }
});

FileSelectorWidget(
  jodit,
  {
    filebrowser(data) {
      console.log(data);
    },
    upload: true,
    url(url, text) {
      console.log(url);
    }
  },
  null,
  () => {},
  true
);
```

## Upload tab

`UploadTab` builds the Upload tab on its own, for a popup that has other tabs: a box that uploads the files dropped on it or chosen in its file input, passes the uploader's answer to a callback and closes the popup. The video popup uses it.

```javascript
const tabs = [
  UploadTab(
    jodit,
    data => {
      data.files.forEach(file =>
        jodit.s.insertHTML(
          `<video controls src="${data.baseurl + file}"></video>`
        )
      );
    },
    { label: 'Drop file', accept: 'video/*' }
  )
];
```


### FileSelectorWidget()

**FileSelectorWidget**(`editor`, `callbacks`, `elm`, `close`, `isImage?`): [`HTMLDivElement`](https://developer.mozilla.org/docs/Web/API/HTMLDivElement)

Defined in: [src/modules/widget/file-selector/file-selector.ts:51](https://github.com/xdan/jodit/blob/main/src/modules/widget/file-selector/file-selector.ts#L51)

Generate 3 tabs
upload - Use Drag and Drop
url - By specifying the image url
filebrowser - After opening the file browser. In the absence of one of the parameters will be less tabs

#### Parameters

| Parameter | Type | Default value | Description |
| ------ | ------ | ------ | ------ |
| `editor` | [`IJodit`](../interfaces/types.IJodit.html) | `undefined` | - |
| `callbacks` | `ImageSelectorCallbacks` | `undefined` | Object with keys `url`, `upload` and `filebrowser`, values which are callback functions with different parameters |
| `elm` | [`HTMLElement`](https://developer.mozilla.org/docs/Web/API/HTMLElement) \| `null` | `undefined` | - |
| `close` | () => `void` | `undefined` | - |
| `isImage` | `boolean` | `true` | - |

#### Returns

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

***

### UploadTab()

**UploadTab**(`editor`, `onSuccess`, `__namedParameters`): [`TabOption`](../interfaces/widget_tabs.TabOption.html)

Defined in: [src/modules/widget/file-selector/file-selector.ts:175](https://github.com/xdan/jodit/blob/main/src/modules/widget/file-selector/file-selector.ts#L175)

The Upload tab: a box that uploads the files dropped on it or chosen in its
file input, then passes the uploader's answer to `onSuccess` and closes the popup

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `editor` | [`IJodit`](../interfaces/types.IJodit.html) |
| `onSuccess` | (`this`, `data`) => `void` |
| `__namedParameters` | \{ `label`: `string`; `accept`: `string`; \} |
| `__namedParameters.label` | `string` |
| `__namedParameters.accept` | `string` |

#### Returns

[`TabOption`](../interfaces/widget_tabs.TabOption.html)