Handle image upload for CKEditor 5 with a graphql backend

110 Views Asked by At

here's my current setup that is resulting in TypeError: undefined is not a function

import client from 'GraphQl/apolloClient'
import { ADD_POST_IMAGE } from 'GraphQl/News/Mutations'

function MyCustomUploadAdapterPlugin(editor) {
  editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
    return new MyUploadAdapter(loader)
  }
}

class MyUploadAdapter {
  constructor(props) {
    // CKEditor 5's FileLoader instance.
    this.loader = props
    this.mutation = client.mutate({ mutation: ADD_POST_IMAGE })
  }

  // Starts the upload process.
  upload() {
    return new Promise((resolve, reject) => {
      this._sendRequest()
    })
  }

  // Prepares the data and sends the request.
  _sendRequest() {
    const [addPost, { error }] = this.mutation

    this.loader.file.then(async (result) => {
      const { data: response } = await addPost({
        variables: { data: { image: result } },
      })
      console.log(response)
    })
  }
}

export default MyCustomUploadAdapterPlugin

i'm trying to setup a custom upload adapter for React CKEditor plugin 5. since i have a graphql backend, i plan to use mutations for upload.

0

There are 0 best solutions below