How to make a backend for finder

To save files on your server, a configured backend must be installed on it that can accept a file (photo, excel table, etc.), put it in the desired directory (folder). Also, the server side can cut or reduce the photo, convert html to pdf, etc. A special address on this backend will give you a list of all available files and directories.

You can independently create a program using available technologies: php, nodejs, golang, java. It is not difficult, it is enough to repeat the protocol that Jodit uses to communicate with the server.

The server must be able to return JSON in this format:

{
	success: true,
	data: {
		// some data
	}
}
Copy

And for example, the list of files should be like this:

{
	success: true,
	data: {
		sources: [
			{
				baseurl: 'https://xdsoft.net/jodit/finder/files/',
				path: '',
				files: [
					{
						file: 'pexels-palu-malerba-2426577.jpg',
						name: 'pexels-palu-malerba-2426577.jpg',
						type: 'image',
						thumb: '_thumbs/pexels-palu-malerba-2426577.jpg',
						changed: '01/09/2022 10:40 AM',
						size: '1.02MB',
						isImage: true
					},
					{
						file: 'pexels-leah-kelley-3722176.jpg',
						name: 'pexels-leah-kelley-3722176.jpg',
						type: 'image',
						thumb: '_thumbs/pexels-leah-kelley-3722176.jpg',
						changed: '01/09/2022 10:40 AM',
						size: '745.82kB',
						isImage: true
					}
				],
				name: 'default'
			}
		],
		code: 220
	}
}
Copy

You can easily generate such a JSON file yourself. But it is better to use a ready-made official implementation.

There are two options here:

• docker image is a universal way, suitable for any hosting with support for docker images.
• php connector - suitable for most hosts that already have php

most preferably using a docker image

Configuring the Jodit backend via docker

We will not delve into what docker is and how it works in this article, this is a topic for a separate discussion.

Installing docker

There is no point in focusing on the docker installation process, the official website has detailed installation manuals for all popular operating systems:

• Ubuntu
• Mac
• Windows

We also need docker-compose. How to install can be read on the link.

The docker image is called chupurnov/filebrowser

To test the work, it is quite enough, just run the command on your computer:

docker pull chupurnov/filebrowser && docker run -t -i -p 8080:80 chupurnov/filebrowser
Copy

To stop the server press CTRL+C

And if you then go to the page http://localhost:8080?action=files, you will see the following message:

{
	"success": false,
	"time": "2022-01-09 19:45:25",
	"data": {
		"messages": [
			"You need override `checkAuthentication` method in file `Application.php` more https://github.com/xdan/jodit-connectors#configuration"
		],
		"code": 501
	},
	"elapsedTime": null
}
Copy

The error tells us that we must think about the security of our application and write a method for authorizing the user. In the first couples, you will probably be able to just mute this method. To do this, we need to tell the docker image to use a different file Application.php

Let's create a folder jodit-connecotor on your computer, and create a file there Application.php:

mkdir ./jodit-connector && touch ./jodit-connector/Application.php
Copy

Open the generated file in some code editor, for example in VSCode

And add a class to it, with which we override the behavior checkAuthentication:

<?php
use Jodit\Application;

class JoditRestApplication extends Application {
    function checkAuthentication() {
      // Do hothing
    }
}
Copy

It is not recommended doing the checkAuthentication method in the production server. In it, you need to check whether the user has any privileges, whether he has a cookie, etc. But for a test environment, this is fine.

save the file and start the server again, but with the overridden Application.php file

docker run -t -i -p 8080:80 -v $(pwd)/jodit-connector/Application.php:/var/www/Application.php chupurnov/filebrowser
Copy

When you visit the http://localhost:8080?action=files page again, you will see an empty file list with no error:

{
	"success": true,
	"time": "2022-01-09 19:59:36",
	"data": {
		"sources": [
			{
				"baseurl": "http://localhost:8080/",
				"path": "",
				"files": [],
				"name": "default"
			}
		],
		"code": 220
	}
}
Copy

Now this address can be used in local development:

const config = {
	filebrowser: {
		ajax: {
			url: 'http://localhost:8080/'
		}
	},
	uploader: {
		url: 'http://localhost:8080/?action=fileUpload'
	}
};
Jodit.make('#editor', config);
Copy

All added images to such uploaded via Jodit.Finder will be immediately removed after the container is stopped. If you want to prevent this from happening, or if you want the connector to return a list of files when you first start it, then just create a folder

mkdir ./jodit-connector/images
Copy

Put several images in it, and run the docker image with this folder as storage:

docker run -t -i -p 8080:80 \
  -v $(pwd)/jodit-connector/Application.php:/var/www/Application.php \
  -v $(pwd)/jodit-connector/images:/var/www/files \
   chupurnov/filebrowser
Copy

And go to the address http://localhost:8080?action=files&path=files, then we will see these same files in the list.

Additional connector configuration

The connector also allows you to customize itself through a configuration file. Create a file config.php

touch ./jodit-connector/config.php
Copy

And open it in an editor. Let's add a basic configuration:

<?php
return [
    "allowCrossOrigin" => true,
    "allowReplaceSourceFile" => true,
    "debug" => false,
    "maxFileSize" => "5Mb",
    "memoryLimit" => "256Mb",
    "sources" => [
        "default" => [
            "title" => "Images",
            "root" => '/var/www/files',
            "baseurl" => "http://localhost:8080/"
        ]
    ]
];
Copy

You can find the values of all settings [here] (https://github.com/xdan/jodit-connectors#configuration)

Start the server again:

docker run -t -i -p 8080:80 \
  -v $(pwd)/jodit-connector/Application.php:/var/www/Application.php \
  -v $(pwd)/jodit-connector/config.php:/var/www/config.php \
  -v $(pwd)/jodit-connector/images:/var/www/files \
   chupurnov/filebrowser
Copy

Now the base folder becomes files and there is no need to specify it in the path, open http://localhost:8080?action=files

Docker Compose

So it is not customary to run an image on the docker server. It is very inconvenient to type such a command on the server every time. It is much more convenient to use docker-compose for this.

Create a file docker-compose.yml

touch ./jodit-connector/docker-compose.yml
Copy

Open the file in a code editor

And fill in like this:

# docker compose version
version: '2'
# List of our services (containers)
services:
    jodit:
        # we have our own image, we indicate the name
        image: chupurnov/filebrowser

        # The port through which our connector will be opened. For a sold server it is probably better to use 80:80
        ports:
            - '8080:80'

        # mount the directory with projects
        volumes:
            - ./Application.php:/var/www/Application.php
            - ./config.php:/var/www/config.php
            - ./images:/var/www/files
Copy

Go to the jodit-connector folder and run docker-compose

cd ./jodit-connector
docker compose pull && docker compose up -d
Copy

To stop the server, run:

docker compose down
Copy

in the same folder.

This code does exactly the same as before, but now after accidentally restarting the server, your backend will be restarted.

Setting up Jodit backend via php

To work, you need php 7.4+ and composer installed.

We will need the same two files as in the docker solution Application.php and config.php.

Run in the working folder on your server:

composer create-project --no-dev jodit/connector
Copy

Go to the connector folder and edit the Application.php and config.php files in the same way as for the docker image solution. The server is ready. Now, in your nginx configuration, set the path to this folder on your server.

server {
  index index.php index.html;
  server_name sitename.com;
  error_log  /var/log/nginx/error.log;
  access_log /var/log/nginx/access.log;
  root /var/www/html;

  location ~ \.php$ {
    try_files $uri =404;
    fastcgi_split_path_info ^(.+\.php)(/.+)$;
    fastcgi_pass php:9000;
    fastcgi_index index.php;
    include fastcgi_params;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    fastcgi_param PATH_INFO $fastcgi_path_info;
  }
}
Copy

and restart your nginx

nginx -s reload
Copy