Upload Images from Local File System

By default, the KendoReact Editor does not provide an option for uploading images. However, you can implement it and extend the built-in functionality.

Paste, Drag and Drop, and Upload Images

The following example demonstrates how to:

  • Add plugin which handles paste and drop DOM events, and then inserts images in Base64 format.
  • Add tool and dialog with an Upload component.

In this example the selected image files are handled on the client side, i.e., no actual upload process is being initiated. You can still re-create the scenario by using a real backend service.

import React from 'react';
import ReactDOM from 'react-dom';
import content from './content';
import { Editor, EditorTools, ProseMirror } from '@progress/kendo-react-editor';
import { InsertImage } from './insertImageTool.jsx';
import { insertImagePlugin } from './insertImagePlugin';
import { insertImageFiles } from './utils';

const { Bold, Italic, Underline, Undo, Redo } = EditorTools;

class App extends React.Component {
    onImageInsert = (args) => {
        const { files, view, event } = args;
        const nodeType = view.state.schema.nodes.image;

        const position = event.type === 'drop' ?
            view.posAtCoords({ left: event.clientX, top: event.clientY }) : null;

        insertImageFiles({ view, files, nodeType, position });

        return files.length > 0;
    }

    onMount = event => {
        const state = event.viewProps.state;
        const plugins = [
            ...state.plugins,
            insertImagePlugin(this.onImageInsert)
        ];

        return new ProseMirror.EditorView(
            { mount: event.dom }, {
                ...event.viewProps,
                state: ProseMirror.EditorState.create({ doc: state.doc, plugins })
            }
        );
    }

    render() {
        return (
            <Editor
                tools={[
                    [ Bold, Italic, Underline ],
                    [ Undo, Redo ],
                    [ InsertImage ]
                ]}
                defaultContent={content}
                contentStyle={{ height: 430 }}
                onMount={this.onMount}
            />
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);