plugin-flydrive

A plugin that provides an Image storage and a component, pre-configured using flydrive (opens in a new tab), a filesystem abstraction layer that allows you to easily interact with files systems of different cloud storage providers.

Installation

npm install @oberoncms/plugin-flydrive flydrive

Setup

Use getFlyDrivePlugin function to generate the plugin, it takes a driver as an argument, the driver should be an instance of the flydrive any flydrive driver

ℹ️

Make sure to follow the flydrive documentation (opens in a new tab) instructions.

// create the driver
import { getFlyDrivePlugin } from "@oberoncms/plugin-flydrive/plugin"
const flyDrivePlugin = getFlyDrivePlugin(driver) // <- pass a flydrive driver instance

Example using S3 driver

Install the required packages for the S3 driver

npm install @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 the driver you want to use
import { getFlyDrivePlugin } from "@oberoncms/plugin-flydrive/plugin" // <- import the plugin
 
const s3Driver = new S3Driver({ // <- create the s3 driver
  credentials: {
    accessKeyId: process.env.ACCESS_KEY_ID,
    secretAccessKey: process.env.SECRET_ACCESS_KEY,
  },
  forcePathStyle: true,
  bucket: process.env.bucket,
  urlBuilder: {
    generateSignedURL() // mandatory
    generateURL() // mandatory
  },
})
// add the plugin to the oberon adapter
export const { adapter, handler } = initOberon({
  config,
  plugins: [
    // other plugins || order doesn't matter
    getFlyDrivePlugin(s3Driver), // <- generate and add the plugin
],
})

Prepare API

Editor configuration

// config.ts
import { Image } from "@oberoncms/plugin-flydrive" // <- import the Image component
 
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: Image.fields.image
            // another array fields
           },
        },
 
        // object with an image
        image: {
          type: "object",
          objectFields: {
             image: Image.fields.image ,
            // 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
  },
}

Open the editor and start uploading images!

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

Vercel Blob

To use the Vercel Blob storage, you need to install the @vercel/blob package

ℹ️

Make sure to follow the Vercel Blob (opens in a new tab) instructions.

import { getFlyDrivePlugin } from "@oberoncms/plugin-flydrive/plugin"
import { VercelBlobDriver } from "@oberoncms/plugin-flydrive/vercel"
 
const vercelBlobDriver = new VercelBlobDriver() // <- create the driver, it will consume token from the environment
 
export const { adapter, handler } = initOberon({
  config,
  plugins: [
    // other plugins || order doesn't matter
    getFlyDrivePlugin(vercelBlobDriver),
  ],
})

for API and Editor configuration, follow the same steps as shown in the S3 example.

Storage Uploadthing