Draft JS DnD Upload Plugin doesn't call handleUpload

Use-case/Problem

I’m trying to setup an editor to handle drag and drop image uploading to S3, though it seems like the handleUpload function that is required to pass in is never actually called. Looks like it’s even commented out https://github.com/draft-js-plugins/draft-js-plugins/blob/master/draft-js-drag-n-drop-upload-plugin/src/handleDroppedFiles.js#L47

Is there a work around for this? The docs show this working https://www.draft-js-plugins.com/plugin/image

Full code for testing, when drag and dropping only the console.log(src) is called, not console.log(arguments) in the handleUpload function.

import React from 'react';
import { EditorState } from 'draft-js';
import Editor, { composeDecorators } from 'draft-js-plugins-editor';;
import createSideToolbarPlugin from 'draft-js-side-toolbar-plugin';
import createFocusPlugin from 'draft-js-focus-plugin';
import createImagePlugin from 'draft-js-image-plugin';
import createAlignmentPlugin from 'draft-js-alignment-plugin';
import createResizeablePlugin from 'draft-js-resizeable-plugin';
import createBlockDndPlugin from 'draft-js-drag-n-drop-plugin';
import createDragNDropUploadPlugin from '@mikeljames/draft-js-drag-n-drop-upload-plugin';

import 'draft-js-image-plugin/lib/plugin.css';

import editorStyles from './editorStyles.css';
import buttonStyles from './buttonStyles.css';
import toolbarStyles from './toolbarStyles.css';
import blockTypeSelectStyles from './blockTypeSelectStyles.css';

const sideToolbarPlugin = createSideToolbarPlugin({
  theme: { buttonStyles, toolbarStyles, blockTypeSelectStyles }
});
const { SideToolbar } = sideToolbarPlugin;
const focusPlugin = createFocusPlugin();
const resizeablePlugin = createResizeablePlugin();
const blockDndPlugin = createBlockDndPlugin();
const alignmentPlugin = createAlignmentPlugin();
const { AlignmentTool } = alignmentPlugin;

const decorator = composeDecorators(
  resizeablePlugin.decorator,
  alignmentPlugin.decorator,
  focusPlugin.decorator,
  blockDndPlugin.decorator
);
const imagePlugin = createImagePlugin({ decorator });

const dragNDropFileUploadPlugin = createDragNDropUploadPlugin({
  handleUpload: () => {
    console.log(arguments)
  },
  addImage: (editorState, src) => {
    console.log(src);
    return imagePlugin.addImage(editorState, src);
  }
});

const plugins = [
  dragNDropFileUploadPlugin,
  blockDndPlugin,
  focusPlugin,
  alignmentPlugin,
  resizeablePlugin,
  imagePlugin,
  sideToolbarPlugin
];

class DndEditor extends React.Component {
  constructor() {
    super();
    this.state = {editorState: EditorState.createEmpty()};
  }
  componentDidMount() {
    this.editor.focus()
  }
  onChange = (editorState) => {
    this.setState({
      editorState,
    });
  }
  focus = () => {
    this.editor.focus();
  }
  render() {
    return (
      <div className={editorStyles.editor} onClick={this.focus}>
        <Editor
          editorState={this.state.editorState}
          onChange={this.onChange}
          plugins={plugins}
          ref={(element) => { this.editor = element; }}
        />
        <AlignmentTool />
        <SideToolbar />
      </div>
    );
  }
}

export default DndEditor;

[sofianeOuafir]

any update on this?

[dinubs]

Thanks! It’s mentioned in the Alignment + Resize + Focus + Drag'n'Drop + Drag'n'Drop Upload Example section for the Image plugin on the website which is originally why I thought it worked.

https://www.draft-js-plugins.com/plugin/image