how can I get the path of the image which I upload from local

[niaofei2008]

export default function uploadCallback(file) { return new Promise( (resolve, reject) => { resolve({ data: { link: "http://dummy_image_src.com" } }); } ); } <Editor toolbar={{ image: { uploadCallback: this.uploadCallback }}}} />

[jpuri]

@niaofei2008: you need to provide your own api to editor for image upload and plug it in using a callback.

[niaofei2008]

uploadCallback(file):the param file has local path of image which i upload?

[niaofei2008]

@jpuri upload local image ,the "src" is undefinde

[jpuri]

Works for me, what kind of image are you uploading ?

[niaofei2008]

@jpuri chose one picture from my computer,src=undefined

[ondrejrohon]

I have similar problem with uploaded images, src attribute is unknown after I save content of Editor as html to db and then open it back. I found that this issue happens only if I return relative image path from my promise. If API returns absolute path, everything works as expected.

I believe this is not expected behaviour and relative paths should work as well.

This is how I retrieve html from editorState:

getHtml(editorState) {
    const rawContentState = convertToRaw( editorState.getCurrentContent() );
    const html = draftToHtml(rawContentState)
    return html;
  }

This is how I set content from db to editor:

componentWillReceiveProps(nextProps) {
    const html = nextProps.content;
    const blocksFromHtml = htmlToDraft(html);
    const state = ContentState.createFromBlockArray( blocksFromHtml.contentBlocks );
    this.setState({
      editor: EditorState.createWithContent(state),
    });
  }

This is my uploadCallback:

uploadImageCallBack(file) {
    const form = new FormData();
    form.append('photo', file);
    const url = Helpers.getServerUrl() + '/upload';
    return axios.post(url, form, {
        headers: {
          'Authorization': 'Bearer ' + localStorage.getItem('id_token'),
        },
      }
    )
    .then(response => {
      return {
        data: {
          link: '/uploads/' + response.data
        }
      }
    });
  }

[nanke-]

@jpuri @ondrejrohon How can i deal with this issue? If uploadCallback returns the relative paths, it does works! I think relative paths is necessary. Please help!

[MamorukunBE]

No more news on that one? I'm facing the exact same problem :(

EDIT: never mind, all is in the js file object properties. Here is how to retrieve the image data (from the file passed to the uploadCallback callback):

const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => { // reader.result contains the base64 data of the user selected image };
reader.onerror = error => { ... };