Upload images to s3, and update the editor state.

[paridin]

Hi, I'm working with medium-draft, I'm using axios, and js aws sdk to upload files to s3

My first step is to get a signed URL and put my object file, at this point, all works well.

My challenge at this times is put the returned URL to my editor state, I tried differents ways to add it, and I can't figure why it's not working.

I read the medium-draft app, and the example app also and I only found one way to set the state, but it depends on a data context which involves the URL and SRC as attributes of data, That's right? image.js

So I created an anonymous function to get the context of this and data object at the same level, and I didn't get errors, the problem is I can't display the image over the editor.

The onChange functions looks like

onChange(e) {

    const file = e.target.files[0];

    if (file.type.indexOf('image/') === 0) {
      api 
      .get(`/getSignedUrl?folder=news&filename=${file.name}&filetype=${file.type}`)
      .then(response => {
        const signedUrl = response.data.url
        const options = {
          headers: {
            'Content-Type': file.type
          }
        }
        // put file to aws
        return axios.put(signedUrl, file, options)

      })
      .then(response => {
        // second step render the s3 url into the editor
        if (response.status === 200) {

           response.data = {
             url: response.request.responseURL.split("?")[0],
             src: response.request.responseURL.split("?")[0]
           }
           // anonymous function to get the data context, otherwise it fails with the error
           // ReferenceError: data is not defined
           const withData = data => {
             if (data.url) {
               const src = response.request.responseURL.split("?")[0]
               this.props.setEditorState(addNewBlock(
                 this.props.getEditorState(),
                 Block.IMAGE, {
                   src,
                 }
               ));
             }
           }
          console.log('data', response.data) 
         // Object {url: "https://s3.amazonaws.com/xideral.co/news/xideral.png", src: "https://s3.amazonaws.com/xideral.co/news/xideral.png"}
          return withData(response) 
        }

      })
      .catch(e => console.log('Error Uploading in blog', e))
    }
    this.props.close();
  }

What must have src, when you don't generate it as a blob file? like const src = URL.createObjectURL(file);? what kind of object is expecting Block.Image instead of src blob.

[brijeshb42]

Src can have any valid value of an image URL, http/https/data. It should work just fine. At what step is the error occurring? After the image URL is successfully generated?

[paridin]

The error occurs on setEditorStatus some errores I got 'data is not defined or set unknown key data (if I set directly the url)'

[brijeshb42]

You should try calling withData(response.data) instead of withData(response)

[paridin]

Thanks for your help, I saw the bug, I was trying to pass the state to the component so it don't have reference of data object, that's why always I got the error, to reproduce it was looks like

<MyEditor
         editorState={this.state.editorState} onChange={this.onChange} />

and my editor was look like

class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.sideButtons = [{
      title: 'Image',
      component: CustomImageSideButton,
    }];
    this.state = {
      editorState:  this.props.editorState || createEditorState(), 
    // here is the bug, I'm interpreting that the context of data is on the parent, 
    // so it returns error _Uncaught Error: Cannot set unknown key "data" on ContentBlock_ 
    // when I type and press enter or when I try to upload the image, 
    // Thats why I don't get the image displayed 
    // To fix it, I removed this this.props.editorState || and it works
    };


    this.onChange = (editorState) => {
      this.setState({ editorState });
    };
  }
  ...
}

to references for people with same issue, my onChange function looks like

  onChange(e) {
    const file = e.target.files[0];
    if (file.type.indexOf('image/') === 0) {
      api
      .get(`/getSignedUrl?folder=news&filename=${file.name}&filetype=${file.type}`)
      .then(response => {
        const signedUrl = response.data.url
        const options = {
          headers: {
            'Content-Type': file.type
          }
        }
        // put to aws
        return axios.put(signedUrl, file, options)

      })
      .then(response => {
        // second step save the data to our database
         this.props.setEditorState(addNewBlock(
           this.props.getEditorState(),
             Block.IMAGE, {
               src: response.request.responseURL.split("?")[0],
             }
           ));
      })
      .catch(e => console.log('Error Uploading in blog', e))
    }
    this.props.close();
  }

so I changes a little bit my called to MyEditor

<MyEditor ref="myeditor" />

and when i need retrieve their content I use the reference

this.refs.myeditor.state.editorState.getCurrentContent()