@oberoncms/plugin-flydrive

A plugin that provides an Image component for OberonCMS it's pre-configured to using flydrive, a filesystem abstraction layer that allows you to easily interact with files systems of different cloud storage providers.

Table of Contents

• @oberoncms/plugin-flydrive
  • Table of Contents
  • Setup
  • prepare API
  • Editor configuration
  • Want to discuss this plugin?

pnpm add @oberoncms/plugin-flydrive flydrive

Setup

• install your favoriate flydrive drivers's requriments, according to the flydrive documentation

for example using S3 driver:

npm i @aws-sdk/s3-request-presigner @aws-sdk/client-s3

• create a flydrive adapter, and generate your plugin!

// adapter.ts
import "server-only"

import { initAdapter } from "@oberoncms/core/adapter"


import { S3Driver } from "flydrive/drivers/s3"

import { getFlyDrivePlugin } from "@oberoncms/plugin-flydrive/plugin"

const s3Driver = new S3Driver({
  credentials: {
    accessKeyId: process.env.ACCESS_KEY_ID,
    secretAccessKey: process.env.SECRET_ACCESS_KEY,
  },
  forcePathStyle: true,
  bucket: process.env.bucket,
  urlBuilder: {
    generateSignedURL() // mandatory
    generateURL() // mandatory
  },
})

// export router
export const { flyDrivePlugin, initFlyDriveRouter } = getFlyDrivePlugin(s3Driver)

// add the plugin to the oberon adapter
export const adapter = initAdapter([
  flyDrivePlugin,
  // other plugins
])

prepare API

// api/flydrive/route.ts
import { initFlyDriveRouter } from "./adapter" // <where you placed your adapter.ts>

export const { GET, POST } = initFlyDriveRouter()

Editor configuration

// config.ts
import { Image } from "@oberoncms/plugin-flydrive"

export const editorConfig = {
  // other configurations
  components: {
    Image, // <- add the Image component

    // using arrayFields/ObjectFields in NestedField Props
    Nested: {
      fields: {
        // array of images
        images: {
          type: "array",
          arrayFields: {
             image: ImageNestedField,
            // another array fields
           },
        },

        // object with an image
        image: {
          type: "object",
          objectFields: {
             image: ImageNestedField ,
            // another object fields
          },
        },
      },
      render(props: {
        images?: OberonImage[]
        image?: { image?: OberonImage }
      }) {
        // props.images is an array of images
        // props.image is an object with an image
        return <></>
      },
    },
    // other components
  },
}

That's it! you can now use the Image component in your editor!

Want to discuss this plugin?

contact me on Discord @sudoahmed GitHub @ahmedrowaihi