Uploading file from WYSIWYG editor

index.ts

import type { EditorConfig } from '@editorjs/editorjs'
// The image tool has no types, if using TS you'll need to define them. See below for example
import ImageTool from '@editorjs/image'
import axios from 'axios'

const editorOptions: EditorConfig = {
  tools: {
    image: {
      class: ImageTool,
      config: {
        uploader: {
          async uploadByFile(file: File) {
            const fileName = await handleImageUpload(file)
            return {
              success: 1,
              file: {
                url: fileName,
              },
            }
          },
        },
      },
    },
  },
}

const getPresignedUrl = async (fileName: string) => {
  // ... get the URL from your API
  console.log(fileName)
  return 'S3_PRESIGNED_URL'
}

// THis may be different depending on your own path in S3.
const constructImageUrl = (fileName: string): string => `https://s3.amazonaws.com/BUCKET_NAME/${fileName}`

const handleImageUpload = async (image: File): Promise<string> => {
  const fileName = image.name
  const fileType = image.type

  const presignedUrl = await getPresignedUrl(fileName)
  await axios.put(presignedUrl, {
    data: image,
    headers: {
      'Content-Type': fileType,
    },
  })
  return constructImageUrl(fileName)
}

// Minimal types to get TS to shut up about EditorJS
// declare module '@editorjs/image' {
//   import { BlockTool } from '@editorjs/editorjs'

//   export default class Image implements BlockTool {
//     save(block: HTMLDivElement)
//     render(): HTMLElement
//   }
// }