Image is not uploaded

[JurajJakubov]

Well, my problem is that image is not uploaded to server but after choosing image in text editor and adding it in field i cant see this image too.

My code:

import Quill from 'quill';
import {
    ImageUpload
} from 'quill-image-upload';

Quill.register('modules/imageUpload', ImageUpload);

const quill = new Quill(editor, {
    theme: 'snow',
    modules: {
        toolbar: '#toolbar',
        imageUpload: {
            url: 'http://localhost:3000', // server url. If the url is empty then the base64 returns
            method: 'POST', // change query method, default 'POST'
            name: 'image', // custom form name
            withCredentials: false, // withCredentials
            headers: {}, // add custom headers, example { token: 'your-token'}
            csrf: {
                token: 'token',
                hash: ''
            }, // add custom CSRF
            customUploader: () => {}, // add custom uploader
            // personalize successful callback and call next function to insert new url to the editor
            callbackOK: (serverResponse, next) => {
                next(serverResponse);
            },
            // personalize failed callback
            callbackKO: serverError => {
                alert(serverError);
            },
            // optional
            // add callback when a image have been chosen
            checkBeforeSend: (file, next) => {
                console.log(file);
                next(file); // go back to component and send to the server},
            }
        }
    }
});

var form = document.querySelector('form');
form.onsubmit = function () {
    // Populate hidden form on submit
    var about = document.querySelector('input[name=body]');
    about.value = JSON.stringify(quill.root.innerHTML);
};

Frontend

 <form method="POST" action="/articles/add?_csrf={{csrfToken}}" enctype="multipart/form-data">
        <label class="label" for="editor-clanok-title">Názov článku</label>
        <div class="input input-fullWidth">
            <input id="editor-clanok-title" placeholder="Názov článku" type="text" name="heading" value="{{heading}}">
        </div>
        <label>Slug</label>
        <input type="text" class="form-control" placeholder="Slug" name="slug">
        <!-- Create the toolbar container -->
        <div id="toolbar">
            <span class="ql-formats">
                <select class="ql-font"></select>
                <select class="ql-size"></select>
            </span>
            <span class="ql-formats">
                <button class="ql-bold"></button>
                <button class="ql-italic"></button>
                <button class="ql-underline"></button>
                <button class="ql-strike"></button>
            </span>
            <span class="ql-formats">
                <select class="ql-color"></select>
                <select class="ql-background"></select>
            </span>
            <span class="ql-formats">
                <button class="ql-script" value="sub"></button>
                <button class="ql-script" value="super"></button>
            </span>
            <span class="ql-formats">
                <button class="ql-header" value="1"></button>
                <button class="ql-header" value="2"></button>
                <button class="ql-blockquote"></button>
                <button class="ql-code-block"></button>
            </span>
            <span class="ql-formats">
                <button class="ql-list" value="ordered"></button>
                <button class="ql-list" value="bullet"></button>
                <button class="ql-indent" value="-1"></button>
                <button class="ql-indent" value="+1"></button>
            </span>
            <span class="ql-formats">
                <button class="ql-direction" value="rtl"></button>
                <select class="ql-align"></select>
            </span>
            <span class="ql-formats">
                <button class="ql-link"></button>
                <button class="ql-image"></button>
                <button class="ql-video"></button>
                <button class="ql-formula"></button>
            </span>
            <span class="ql-formats">
                <button class="ql-clean"></button>
            </span>
        </div>

        <!-- Create the editor container -->
        <div>
            <input name="body" type="hidden" value="">
            <div id="editor">
                {{{body}}}
            </div>
        </div>
        <label class="label" for="editor-clanok-dropzone">Thumbnail</label>
        <input type="file" name="thumbnail" />
        <div class="form-row">
            <button type="submit" class="button button--green">Publikovať</button>
            <button class="button button--outlined">Uložiť ako koncept</button>
        </div>
    </form>

Any suggestions everything else works fine.

[JurajJakubov]

Just forgot to refresh webpack. Sorry.