React-draft-wysiwyg editor crashed after uploading Image in IE 11 and click on Add Button

[ascScience]

When I upload an image on Editor and click on Add button the editor get crashed in IE 11, but working fine on other browsers, below is the screenshot of error I am getting, it shows an error occurred in component, I had also changed the versions of react-draft-wysiwyg and drafts but nothing works.

[spant1]

@jpuri I am facing the same issue.

[Catchwa]

Don't you want to show the error in your console just above what you've pasted? The error message says "The above error occurred", but you're not showing what the above error actually is!

Can you please also post what polyfills you have in your environment.

[ascScience]

below is screenshot of error and the pollyfill I am using is react-app-polyfill

[spant1]

@Catchwa @jpuri - Any idea about this?

[spant1]

@jpuri Need your help on this, this is a long time pending issue.

[Catchwa]

Firstly, this issue has been open for a month and a half, it's not really a "long time pending issue". Secondly, setDraftEditorSelection.js is a file from draft-js, not this project. I'd suggest you have a look at known IE11 issues in draft-js: https://github.com/facebook/draft-js/search?p=2&q=IE11&type=Issues Possibly related: https://github.com/facebook/draft-js/issues/1788

[tharaka1]

@ascScience Did you got fix for this issue?

[tharaka1]

@jpuri any update on "add image button crash the IE issue"?

note. this is not happening on click on add link button

[asonetu]

I solved this problem by following way.

const [editorState, setEditorState] = useState('');
const editor = useRef(null);
let isImageAdded = false;

const setSelection = () => {
  // setSelection for IE11
  const selection = document.getSelection();
  const range = document.createRange();
  range.setStart(editor.current.editor.editorContainer, 0);
  range.setEnd(editor.current.editor.editorContainer, 0);
  selection.removeAllRanges();
  selection.addRange(range);
};

const uploadCallbackFunc = file => {
  const reader = new FileReader();
  reader.readAsDataURL(file);
  return new Promise(resolve => {
    reader.onload = () => {
      resolve({
        data: {
          link: reader.result
        }
      });
      setSelection();
      isImageAdded = true;
    };
  });
};

const onEditorStateChangeCallback = editorState => {
  if (isImageAdded) {
    setSelection();
    isImageAdded = false;
  }
  setEditorState(editorState);
};

return (
  <Editor
    ref={editor}
    editorState={editorState}
    toolbar={{
      image: {
        uploadCallback: uploadCallbackFunc,
        ...
      }
    }}
    onEditorStateChange={onEditorStateChangeCallback}
    ...
  />
);

I hope this will help you.

[richardblondet]

@asonetu Hello, I tried your solution but this didn't work for me. It says "Unspecified Error." in the stack trace Has anyone's gotten a solution for this?

[richardblondet]

@asonetu is it possible for you to explain your solution? I'm still looking a way to solve this on our end

[mishraSubhaR]

@jpuri any update on this. I tried the solution given by @asonetu but didn't work. or anyone else got any solution please share.

[spant1]

any update?

[ascScience]

@jpuri this issue is still pending in Internet Explorer, can I get any updates on this to resolve the issue

[spant1]

Any Update?