Draft-js-plugins: Draft JS DnD Upload Plugin doesn't call handleUpload

[dinubs]

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;

[juliankrispel]

Hey there - I'm afraid the upload plugin doesn't curently work, hence it's not on the draft js plugins website. The plugin needs to be pretty much rewritten from the ground up. I'm working on a new version as we speak. If you'd like to get involved in building this please get in touch on the draft js slack, cheers

[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

[juliankrispel]

@dinubs better remove that then!

[sofianeOuafir]

any update on this?