insert-image-to-editor

insert-image-to-editor.tsx

<input
        id="fileInput"
        style={{ display: "none" }}
        type="file"
        accept="image/png,image/jpeg,image/jpg,image/gif"
        onChange={event => {
          const reader = new FileReader();
          reader.addEventListener(
            "load",
            function() {
              const contentStateWithEntity = editorState
                .getCurrentContent()
                .createEntity("IMAGE", "IMMUTABLE", { src: reader.result });
              setEditorState(
                AtomicBlockUtils.insertAtomicBlock(
                  EditorState.set(editorState, {
                    currentContent: contentStateWithEntity
                  }),
                  contentStateWithEntity.getLastCreatedEntityKey(),
                  " "
                )
              );
            },
            false
          );
          if (event.target.files) {
            reader.readAsDataURL(
              Array.prototype.slice.call(event.target.files)[0]
            );
          }
        }}
      />