options.enableDragAndDropFileToEditor Also it must be properly configured the module itself through the setting options.uploader For example, it may be so The example shows that the server must be a file connector/uploader.php which should be able to take the file and output JSON {msg: '', error: 0, images: []} In this case , if an error occurs , the answer must be the And if all well then this Here is an example of the simplest file connector/uploader.php You can check the drag and drop files in this example Try drag and drop file here In addition, the module Uploader allows you to create some place for uploading files .uploaderbox { margin:10px 0; padding: 10px; border:3px solid rgb(127, 127,127); border-radius:5px; } .uploaderbox.draghover { border-style:dotted; } Drag and drop file here, or use the input file picker " />

Uploader options and Drag and Drop files

To use drag and drop file upload option must be enabled options.enableDragAndDropFileToEditor Also it must be properly configured the module itself through the setting options.uploader For example, it may be so

new Jodit('#editor', {
    enableDragAndDropFileToEditor: true,
    uploader: {
        url: 'connector/upload.php',
        format: 'json',
        pathVariableName: 'path',
        filesVariableName: 'images',
        prepareData: function (data) {
            return data;
        },
        isSuccess: function (resp) {
            return !resp.error;
        },
        getMsg: function (resp) {
            return resp.msg.join !== undefined ? resp.msg.join(' ') : resp.msg;
        },
        process: function (resp) {
            return {
                files: resp[this.options.uploader.filesVariableName] || [],
                path: resp.path,
                baseurl: resp.baseurl,
                error: resp.error,
                msg: resp.msg
            };
        },
        error: function (e) {
            this.events.fire('errorPopap', [e.getMessage(), 'error', 4000]);
        },
        defaultHandlerSuccess: function (data, resp) {
            var i, field = this.options.uploader.filesVariableName;
            if (data[field] && data[field].length) {
                for (i = 0; i < data[field].length; i += 1) {
                    this.selection.insertImage(data.baseurl + data[field][i]);
                }
            }
        },
        defaultHandlerError: function (resp) {
            this.events.fire('errorPopap', [this.options.uploader.getMsg(resp)]);
        }
    }
});

The example shows that the server must be a file connector/uploader.php which should be able to take the file and output JSON {msg: '', error: 0, images: []} In this case , if an error occurs , the answer must be the

{msg: 'File very big!', error: 1, images: []}

And if all well then this

{msg: 'File was uploaded', error: 0, images: ['/images/asdasdasd.png']}

Here is an example of the simplest file connector/uploader.php

<?php
header('Content-Type: application/json');
$base = 'images/';
$root = realpath(dirname(__FILE__) .'/..').'/images/';
$relpath = isset($_REQUEST['path']) ?  $_REQUEST['path'] : ''; // Use options.uploader.pathVariableName

$path = $root;

// Do not give the file to load into the category that is lower than the root
if (realpath($root.$relpath) && is_dir(realpath($root.$relpath)) && strpos(realpath($root.$relpath).'/', $root) !== false) {
    $path = realpath($root.$relpath).'/';
}

$errors = [
    'There is no error, the file uploaded with success',
    'The uploaded file exceeds the upload_max_filesize directive in php.ini',
    'The uploaded file exceeds the MAX_FILE_SIZE directive that was specified in the HTML form',
    'The uploaded file was only partially uploaded',
    'No file was uploaded',
    'Missing a temporary folder',
    'Failed to write file to disk.',
    'A PHP extension stopped the file upload.',
];

// Black and white list
$config = [
    'white_extensions' => ['png', 'jpeg', 'gif', 'jpg'],
    'black_extensions' => ['php', 'exe', 'phtml'],
];

// function for creating safe name of file
function makeSafe($file) {
    $file = rtrim($file, '.');
    $regex = ['#(\.){2,}#', '#[^A-Za-z0-9\.\_\- ]#', '#^\.#'];
    return trim(preg_replace($regex, '', $file));
}

$result = (object)['error'=> 0, 'msg'=>[], 'files'=> []];

function warning_handler($errno, $errstr) {
    global $result;
    $result->error = $errno;
    $result->msg[] = $errstr;
    exit(json_encode($result));
}

set_error_handler('warning_handler', E_ALL);

//Here 'images' is options.uploader.filesVariableName
if (isset($_FILES['images']) 
    and is_array($_FILES['images']) 
    and isset($_FILES['images']['name']) 
    and is_array($_FILES['images']['name']) 
    and count($_FILES['images']['name'])
) {
    foreach ($_FILES['images']['name'] as $i=>$file) {
        if ($_FILES['images']['error'][$i]) {
            trigger_error(isset($errors[$_FILES['images']['error'][$i]]) ? $errors[$_FILES['images']['error'][$i]] : 'Error', E_USER_WARNING);
            continue;
        }
        $tmp_name = $_FILES['images']['tmp_name'][$i];
        if (move_uploaded_file($tmp_name, $file = $path.makeSafe($_FILES['images']['name'][$i]))) {
            $info = pathinfo($file);
            // check whether the file extension is included in the whitelist
            if (isset($config['white_extensions']) and count($config['white_extensions'])) {
                if (!in_array(strtolower($info['extension']), $config['white_extensions'])) {
                    unlink($file);
                    trigger_error('File type not in white list', E_USER_WARNING);
                    continue;
                }
            }
            //check whether the file extension is included in the black list
            if (isset($config['black_extensions']) and count($config['black_extensions'])) {
                if (in_array(strtolower($info['extension']), $config['black_extensions'])) {
                    unlink($file);
                    trigger_error('File type in black list', E_USER_WARNING);
                    continue;
                }
            }
            $result->msg[] = 'File '.$_FILES['images']['name'][$i].' was upload';
            $result->images[] = $base.basename($file);
        } else {
            $result->error = 5;
            if (!is_writable($path)) {
                trigger_error('Destination directory is not writeble', E_USER_WARNING);
            } else {
                trigger_error('No images have been uploaded', E_USER_WARNING);
            }
        }
    }
};

if (!$result->error and !count($result->files)) {
    $result->error = 5;
    trigger_error('No files have been uploaded', E_USER_WARNING);
}

exit(json_encode($result));

You can check the drag and drop files in this example

<textarea id="draganddrop" cols="30" rows="10"></textarea>
new Jodit('#draganddrop', {
    toolbar: false,
    uploader: {
        url: '../connector/upload.php',
        filesVariableName: 'images',
        process: function (resp) {
            var i, images = resp[this.options.uploader.filesVariableName] || [];
            if (images.length) {
                for (i = 0;i < images.length; i += 1) {
                    images[i] = '/' + images[i]
                }
            }
            this.events.fire('errorPopap', ['Files ' + images.join(',') + ' were uploaded', 'success']);
            return {
                files: images,
                path: 'images/',
                baseurl: 'http://xdsoft.net/jodit/files/',
                error: resp.error,
                msg: resp.msg
            };
        },
    },
});

Try drag and drop file here

In addition, the module Uploader allows you to create some place for uploading files

<textarea id="draganddrop2"></textarea>
<div id="uploaderbox">Drag and drop file here, or use the input file picker <input accept="image/*" tabindex="-1" dir="auto" multiple="" type="file"/></div>

<style>
#uploaderbox {
    margin:10px 0;
    padding: 10px;
    border:3px solid rgb(127, 127,127); 
    border-radius:5px; 
}

#uploaderbox.draghover {
    border-style:dotted; 
}
</style>
editor = new Jodit('#draganddrop2', {
    buttons: ['image'],
    uploader: {
        url: '../connector/index.php?action=upload',
    },
});
editor.uploader.bind($('#uploaderbox'));

Drag and drop file here, or use the input file picker