Problems with Drop( 'insertImage', 'insertVideo') button

Hi, I'll put it in steps here!

Expected behavior. I would like to use the drop imageInsert and drop videoInsert feature, but it is not working.

Steps to reproduce the problem. 1 - I'm using react-froala-wysiwyg 2 - I'm working it as a component, I'll be putting the code below 3 - I'm trying to use the 'insertImage' and 'insertVideo' buttons with the 'Drop image' and 'Drop Video' options, but they are not performing any action to open folder to choose both files.

The 'Drop (or click)' buttons are without action, and when trying to drag an image or video it opens it in a new tab.

I would like to get your help for this problem, can anyone help me?

Editor version. My Froala version : "froala-editor": "^4.0.14", "react-froala-wysiwyg": "^4.0.14".

Browser. Chrome and Firefox

code: import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import 'froala-editor/js/froala_editor.pkgd.min'; import 'froala-editor/js/plugins.pkgd.min'; import 'froala-editor/css/froala_style.min.css'; import 'froala-editor/css/froala_editor.pkgd.min.css'; import FroalaEditor from 'react-froala-wysiwyg';

export default class FroalaEditorComponent extends Component { constructor(oProps) { super(oProps); this.config = oProps.config;

this.handleModelChange = this.handleModelChange.bind(this);
this.state = {
  model: oProps.model
};

}

componentDidMount() { const { fnRef } = this.props; if (fnRef !== null) { fnRef(this.elRef.editor); } }

handleModelChange(cModel) { this.setState({ model: cModel }); }

render() { const { fnHandleChange } = this.props; const { model } = this.state;

this.config['toolbarButtons'] = {
  moreText: {
    buttons: [
      'bold',
      'italic',
      'underline',
      'strikeThrough',
      'subscript',
      'superscript',
      'fontFamily',
      'fontSize',
      'textColor',
      'backgroundColor',
      'inlineClass',
      'inlineStyle',
      'clearFormatting'
    ]
  },

  moreParagraph: {
    buttons: [
      'alignLeft',
      'alignCenter',
      'formatOLSimple',
      'alignRight',
      'alignJustify',
      'formatOL',
      'formatUL',
      'paragraphFormat',
      'paragraphStyle',
      'lineHeight',
      'outdent',
      'indent',
      'quote'
    ]
  },

  moreRich: {
    buttons: [
      'insertLink',
      'insertImage',
      'insertVideo',
      'insertTable',
      'fontAwesome',
      'specialCharacters',
      'embedly',
      'insertHR'
    ]
  },

  moreMisc: {
    buttons: ['undo', 'redo', 'fullscreen', 'spellChecker', 'selectAll', 'html', 'help'],
    align: 'right',
    buttonsVisible: 2
  }
};

return (
  <FroalaEditor
    ref={elRef => {
      this.elRef = elRef;
    }}
    model={model}
    onModelChange={evt => {
      this.handleModelChange(evt);
      fnHandleChange(evt);
    }}
    config={this.config}
    typingTimer={1000}
  />
);

} }

FroalaEditorComponent.defaultProps = { model: null, elEditor: null, fnRef: null };

froala / wysiwyg-editor

Problems with Drop( 'insertImage', 'insertVideo') button #4510