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

[pmenotti]

Hi, I'll put it in steps here! 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?

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

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 };

[DevYuns]

same issue