Draft-Js not showing my image using an image URL

  draftjs, image, javascript, reactjs

So, I am currently trying to be able to make it possible to paste an image following this [tutorial][1]. The issue I’m having is that I have my code exactly like this tutorial and every time I paste an image it just acts like there was a line break two times with no text. My handlePastedFiles function runs and returns the URL, and then my insertImage runs and passes the link to the insertImage function.

Also, the image url is from a cloud storage and the URL works when viewing in browser.

Here is my handlePastedFiles function:

const handlePastedFiles = (files) => {
console.log('handlePastedFiles is running')
const formData = new FormData();
formData.append('file', files[0]) 
console.log(files)
fetch(url, 
{method: 'POST', body: formData})
.then(res => {
  return res.json()
})
.then(data => {
  console.log(data)
  if (data.message) { 
      console.log(data.message)
      setEditorState(insertImage(data.message)) //created below
  } else {
    console.log('no file found')
  }
}).catch(err => {
    console.log(err) 
})

}

and here’s my insertImages function:

const insertImage = ( url) => {
console.log('!!!!!', url)
const contentState = editorState.getCurrentContent();
const contentStateWithEntity = contentState.createEntity(
    'IMAGE',
    'IMMUTABLE',
    { src: url },)
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
const newEditorState = EditorState.set( editorState, { currentContent: contentStateWithEntity });
return AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' ');

};

Please any help is much appreciated, and let me know if I need more information. Thank you in advance!
[1]: https://daveteu.medium.com/draftjs-insert-paste-images-into-your-content-820159025258

Source: Ask Javascript Questions

LEAVE A COMMENT