---
title: Filebrowser Without Jodit
description: Use the Jodit file browser module independently without the editor.
keywords: filebrowser standalone, file browser, jodit module
---

# How to use the filebrowser module without Jodit

You can use the Jodit file browser without the editor itself.
The module is available through the namespace of the modules:

```js
console.log(Jodit.modules.FileBrowser);
console.log(Jodit.modules.FileBrowserPro); // FOR PRO/OEM VERSION
```

For example, you have a field with a button, and you want to fill in the field after selecting a file:

## Imperative way

```html
<script>
	const fb = new Jodit.modules.FileBrowser({
		ajax: {
			url: 'https://sitename.com/connector/index.php'
		}
	});

	function openFb() {
		fb.open(images => {
			document.getElementById('fileName').value = images.files[0];
		});
	}
</script>

<form>
	<input type="text" readonly id="fileName" />
	<button onclick="openFb()" type="button">Select</button>
</form>
```

### Result

```html
<!-- Example Start -->
<script>
	function openFb() {
		const fb = new Jodit.modules.FileBrowser({
			uploader: {
				url: 'https://xdsoft.net/jodit/finder/?action=fileUpload'
			},
			ajax: {
				url: 'https://xdsoft.net/jodit/finder/'
			}
		});

		fb.open(images => {
			document.getElementById('fileName').value = images.files[0];
		});
	}
</script>

<form>
	<input type="text" readonly id="fileName" />
	<button onclick="openFb()" type="button">Select</button>
</form>
<!-- Example End -->
```

## Layout way

You can also display a file browser directly in your layout, without a modal window,
but this can only be done in the [PRO version](/jodit/pro/)

```html
<input type="text" readonly id="fileName" />
<div id="someWrapper"></div>
<script>
	const browser = new Jodit.modules.FileBrowserPro({
		uploader: {
			url: 'https://sitename.net/jodit/finder/?action=fileUpload'
		},
		ajax: {
			url: 'https://sitename.net/jodit/finder/'
		}
	});
	browser.setMod('static', true).open(images => {
		document.getElementById('fileName').value = images.files[0];
	});

	const wrapper = document.getElementById('someWrapper');
	wrapper.appendChild(browser.container);
</script>
```

### Result

```html
<!-- Example Pro Start -->
<input type="text" readonly id="fileName" />
<div id="someWrapper"></div>
<script>
	const browser = new Jodit.modules.FileBrowserPro({
		uploader: {
			url: 'https://xdsoft.net/jodit/finder/?action=fileUpload'
		},
		ajax: {
			url: 'https://xdsoft.net/jodit/finder/'
		}
	});
	browser.setMod('static', true).open(images => {
		document.getElementById('fileName').value = images.files[0];
	});

	const wrapper = document.getElementById('someWrapper');
	wrapper.appendChild(browser.container);
</script>
<!-- Example End -->
```

## Browse / preview without selecting (no callback)

If you omit the callback, the PRO file browser switches to browse mode:
double-clicking an image opens the built-in fullscreen preview (lightbox) and
the browser stays open instead of inserting the file and closing. This is
how the standalone finder on the [Jodit PRO page](/jodit/pro/) behaves.

The important part is passing no callback to `open()`. A callback (even the
editor's default one via `jodit.filebrowser.open(cb)`) makes selecting an item
insert it and close the browser.

```html
<div id="someWrapper"></div>
<script>
	const browser = new Jodit.modules.FileBrowserPro({
		uploader: {
			url: 'https://sitename.net/jodit/finder/?action=fileUpload'
		},
		ajax: {
			url: 'https://sitename.net/jodit/finder/'
		}
	});

	// no callback -> double click opens the fullscreen preview, nothing closes
	browser.setMod('static', true).open();

	document.getElementById('someWrapper').appendChild(browser.container);
</script>
```