editor-js / image

Image Block for Editor.js
MIT License
238 stars 289 forks source link

Add request handlers #19

Closed dimensi closed 5 years ago

dimensi commented 5 years ago

Can you add handlers to endpoints. If you look at the backend side, yes, it's easier to just specify the url and line up the backend with the format you want. But if you look at it from the frontend side, it is easier to manage the process of sending a file to the backend. For cases when graphql is used as a transport instead of rest. For cases when it is more convenient to use your api layer than to adjust to your api. Something like that

  {
    handlers: {
      byFile (file, done) {
        /// magic code
        done(url)
      },
      byUrl (url, done) {
        /// magic code
        done(urlFromBackend)
      },
    },
  }

// or promise
{
      handlers: {
        async byFile (file) {
          // magic code
          return url;
        },
        async byUrl (url) {
          // magic code
          return urlFromBackend;
        },
      },
}
dimensi commented 5 years ago

I looked at the code. I think it's better to separate Uploader from the main part of the code and accept a class that inherits the Uploader interface in the image block. Somehow, it's like this.

import ImageTool from '@editorjs/image'
import Uploader from '@editorjs/image/dist/uploader' // for tree shaking

const editor = EditorJS({
  tools: {
    image: {
      class: ImageTool,
      config: {
        uploader: new Uploader({
          byFile: 'http://localhost:8008/uploadFile', // Your backend file uploader endpoint
          byUrl: 'http://localhost:8008/fetchUrl', // Your endpoint that provides uploading by Url
        })
      }
    }
  }
});

and custom uploader

import ImageTool from '@editorjs/image'

class CustomUploader {
  uploadSelectedFile() {}
  uploadByUrl() {}
  uploadByFile() {}
}

const editor = EditorJS({
  tools: {
    image: {
      class: ImageTool,
      config: {
        uploader: new CustomUploader()
      }
    }
  }
});
gohabereg commented 5 years ago

@dimensi super cool idea!