Question about uplaoding images

[NothingSOS]

Hello, I want to ask about how to customize the 'handleFileUpload' function to send images to the server-side like using 'multer' plugin. Thank you.

[florapdx]

Hi @NothingSOS!

You'd need to use either native fetch or a fetch library of some sort to post the file to your server. You can check out the docs on native fetch here. It's really up to you to pick your preferred tools and to write that code -- there's nothing to "customize" per se here because the handleFileUpload method is code that you write :)

Having said that, here is some example code:

## parent component renders the ReactDrafts editor
import React, { Component } from 'react';
import ReactDrafts from 'react-drafts';

class MyEditor extends Component {
  handleFileUpload = file => {
    fetch(yourServerUrl, {
      method: 'POST',
      body: file,
      ...
    })
      .then(() => console.log('Yay!'))
      .catch(() => console.log('Oh no! There was an error saving your file!'))
  }

  render() {
    return (
      <div className="my-editor">
        <ReactDrafts
          onFileUpload={this.handleFileUpload}
          exportTo="html"
        />
      </div>
    );
  }
}

[NothingSOS]

Thank you for the answer. I will learn how to use fetch right away.

I want to ask some other questions (I think they are not really issues so I will ask here)

• How to insert photos at the same row ? (because from my understanding when I insert a new photo, the editor will create a new table and it will make the photo go to new line)
• From my understanding, the photo toolbar need the table toolbar to work. Is it possible to hide the table toolbar and the photo toolbar still works properly ? (I don’t want users to put the table in the content)