React-draft-wysiwyg: need data:image import image behavior

[ChuckIrvine]

I am porting my web app from using TinyMCE to react-draft-wysiwyg. (Shameless plug: www.evrsity.com). When I import an image using TinyMCE, the image is included inline in the html output using data:image/... This worked out well for me since I store and retrieve editor data from my mongo database. react-draft-wysiwyg, on the other hand, requires me to essentially create a URL that I can use to embed the image using

It would be great if react-draft-wysiwyg could be updated to provide the inline image import option.

Until then, my approach would be, at the point of saving the editor contents, to convert the html exported from the editor state to have the image inline by replacing the image url reference with the actual inlined image.

Would be great if I could be some advice on whether I am on the right path with this. Thanks

[jpuri]

Hey @ChuckIrvine , is it possible that you convert it to data image in and return that from file upload method ?

[ChuckIrvine]

It seems that you would need to do this when the user saves his data. Parse the data in the editor's state, looking for the the image URL. Replace that with the base64 strings from the imported image files. Shouldn't be too difficult I would think.

I wonder if anyone can see an advantage to the current design react-draft-wysiwyg over a design where the image data is inlined into the editor's state?

[jpuri]

I am wondering why is this not possible in upload function ?

[ChuckIrvine]

I suppose that you could. If you did it then, you would do the same thing that I described at save time - right? Or would it be simpler somehow?

[riseremi]

@ChuckIrvine, if I understand you correctly, your task is to add an image from your device to react-draft-wysiwyg as base64. It is definitely possible to convert it in upload function as @jpuri said.

Code example

const getFileBase64 = (file, callback) => {
  var reader = new FileReader();
  reader.readAsDataURL(file);
  // Since FileReader is asynchronous,
  // we need to pass data back.
  reader.onload = () => callback(reader.result);
  // TODO: catch an error
  reader.onerror = error => {};
};

const imageUploadCallback = file => new Promise(
  (resolve, reject) => getFileBase64(
    file,
    data => resolve({ data: { link: data } })
  )
);


<Editor
  toolbar={{
    image: {
      uploadCallback: imageUploadCallback,
      previewImage: true,
    },
  }}
  // Other props
/>

[BuiXuanNhanTriSE052111]

help me!
i need change data of editor with Editor have image upload
editorState={editorState}

[riseremi]

@caominhtung1992 I'm sorry, but I think you should create another issue with more detailed info about your problem. This is an issue about base64 image uploading.

[conterio]

@riseremi so your solution works, however when we save and then go back to edit, the images are not showing up in the wysiwyg, but the base64 code is still there when you inspect, it's just not showing the images.

So is there a way when you go back to edit it will show the images as well?

[fanguangjian]

@ChuckIrvine, if I understand you correctly, your task is to add an image from your device to react-draft-wysiwyg as base64. It is definitely possible to convert it in upload function as @jpuri said.

Code example

```js
const getFileBase64 = (file, callback) => {
var reader = new FileReader();
reader.readAsDataURL(file);
// Since FileReader is asynchronous,
// we need to pass data back.
reader.onload = () => callback(reader.result);
// TODO: catch an error
reader.onerror = error => {};
};

const imageUploadCallback = file => new Promise(
(resolve, reject) => getFileBase64(
file,
data => resolve({ data: { link: data } })
)
);

toolbar={{
image: {
uploadCallback: imageUploadCallback,
previewImage: true,
},
}}
// Other props
/>
`

Great!!!

[MS44118]

hello @jpuri!
it would be awesome to include directly the solution from @riseremi and @ChuckIrvine :

@ChuckIrvine, if I understand you correctly, your task is to add an image from your device to react-draft-wysiwyg as base64. It is definitely possible to convert it in upload function as @jpuri said.

Code example

const getFileBase64 = (file, callback) => {
  var reader = new FileReader();
  reader.readAsDataURL(file);
  // Since FileReader is asynchronous,
  // we need to pass data back.
  reader.onload = () => callback(reader.result);
  // TODO: catch an error
  reader.onerror = error => {};
};

const imageUploadCallback = file => new Promise(
  (resolve, reject) => getFileBase64(
    file,
    data => resolve({ data: { link: data } })
  )
);


<Editor
  toolbar={{
    image: {
      uploadCallback: imageUploadCallback,
      previewImage: true,
    },
  }}
  // Other props
/>

[srj-dubey]

const uploadImageCallBack = (file: any): any => {
    return new Promise((resolve, reject) => {
      if (file) {
        const reader = new FileReader();
        reader.onload = (): any => {
          resolve({ data: { link: reader.result } });
        };
        reader.onerror = (er): any => {
          console.log('error: ', er);
        };
        reader.readAsDataURL(file);
      }
    });
 };

This is what I'm using to to add Base64 Image into the editor. This seems to work fine in Firefox, but I'm having difficulty in Chrome. Any Thoughts? @jpuri @riseremi