@payloadcms/plugin-cloud-storage 1.0.18 → 1.1.0-beta.0

package/src/plugin.ts

@@ -0,0 +1,101 @@
+import type { Config } from 'payload/config'
+import { extendWebpackConfig } from './webpack'
+import type { PluginOptions } from './types'
+import { getBeforeChangeHook } from './hooks/beforeChange'
+import { getAfterDeleteHook } from './hooks/afterDelete'
+import { getFields } from './fields/getFields'
+
+// This plugin extends all targeted collections by offloading uploaded files
+// to cloud storage instead of solely storing files locally.
+
+// It is based on an adapter approach, where adapters can be written for any cloud provider.
+// Adapters are responsible for providing four actions that this plugin will use:
+// 1. handleUpload, 2. handleDelete, 3. generateURL, 4. staticHandler
+
+// Optionally, the adapter can specify any Webpack config overrides if they are necessary.
+
+export const cloudStorage =
+  (pluginOptions: PluginOptions) =>
+  (incomingConfig: Config): Config => {
+    const { collections: allCollectionOptions, enabled } = pluginOptions
+    const config = { ...incomingConfig }
+
+    const webpack = extendWebpackConfig({ options: pluginOptions, config: incomingConfig })
+
+    config.admin = {
+      ...(config.admin || {}),
+      webpack,
+    }
+
+    // Return early if disabled. Only webpack config mods are applied.
+    if (enabled === false) {
+      return config
+    }
+
+    const initFunctions: Array<() => void> = []
+
+    return {
+      ...config,
+      collections: (config.collections || []).map(existingCollection => {
+        const options = allCollectionOptions[existingCollection.slug]
+
+        if (options?.adapter) {
+          const adapter = options.adapter({
+            collection: existingCollection,
+            prefix: options.prefix,
+          })
+
+          if (adapter.onInit) initFunctions.push(adapter.onInit)
+
+          const fields = getFields({
+            collection: existingCollection,
+            disablePayloadAccessControl: options.disablePayloadAccessControl,
+            generateFileURL: options.generateFileURL,
+            prefix: options.prefix,
+            adapter,
+          })
+
+          const handlers = [
+            ...(typeof existingCollection.upload === 'object' &&
+            Array.isArray(existingCollection.upload.handlers)
+              ? existingCollection.upload.handlers
+              : []),
+          ]
+
+          if (!options.disablePayloadAccessControl) {
+            handlers.push(adapter.staticHandler)
+          }
+
+          return {
+            ...existingCollection,
+            upload: {
+              ...(typeof existingCollection.upload === 'object' ? existingCollection.upload : {}),
+              handlers,
+              disableLocalStorage:
+                typeof options.disableLocalStorage === 'boolean'
+                  ? options.disableLocalStorage
+                  : true,
+            },
+            hooks: {
+              ...(existingCollection.hooks || {}),
+              beforeChange: [
+                ...(existingCollection.hooks?.beforeChange || []),
+                getBeforeChangeHook({ adapter, collection: existingCollection }),
+              ],
+              afterDelete: [
+                ...(existingCollection.hooks?.afterDelete || []),
+                getAfterDeleteHook({ adapter, collection: existingCollection }),
+              ],
+            },
+            fields,
+          }
+        }
+
+        return existingCollection
+      }),
+      onInit: async payload => {
+        initFunctions.forEach(fn => fn())
+        if (config.onInit) await config.onInit(payload)
+      },
+    }
+  }

package/src/types.ts

@@ -0,0 +1,79 @@
+import type { NextFunction, Response } from 'express'
+import type { TypeWithID } from 'payload/dist/collections/config/types'
+import type { FileData, ImageSize } from 'payload/dist/uploads/types'
+import type { CollectionConfig, PayloadRequest } from 'payload/types'
+import type { Configuration as WebpackConfig } from 'webpack'
+
+export interface File {
+  buffer: Buffer
+  filename: string
+  filesize: number
+  mimeType: string
+  tempFilePath?: string
+}
+
+export type HandleUpload = (args: {
+  collection: CollectionConfig
+  req: PayloadRequest
+  data: any
+  file: File
+}) => Promise<void> | void
+
+export interface TypeWithPrefix {
+  prefix?: string
+}
+
+export type HandleDelete = (args: {
+  collection: CollectionConfig
+  req: PayloadRequest
+  doc: TypeWithID & FileData & TypeWithPrefix
+  filename: string
+}) => Promise<void> | void
+
+export type GenerateURL = (args: {
+  filename: string
+  collection: CollectionConfig
+  prefix?: string
+}) => string | Promise<string>
+
+export type StaticHandler = (
+  req: PayloadRequest,
+  res: Response,
+  next: NextFunction,
+) => Promise<unknown> | unknown
+
+export interface GeneratedAdapter {
+  handleUpload: HandleUpload
+  handleDelete: HandleDelete
+  generateURL: GenerateURL
+  staticHandler: StaticHandler
+  webpack?: (config: WebpackConfig) => WebpackConfig
+  onInit?: () => void
+}
+
+export type Adapter = (args: { collection: CollectionConfig; prefix?: string }) => GeneratedAdapter
+
+export type GenerateFileURL = (args: {
+  collection: CollectionConfig
+  filename: string
+  prefix?: string
+  size?: ImageSize
+}) => Promise<string> | string
+
+export interface CollectionOptions {
+  disableLocalStorage?: boolean
+  disablePayloadAccessControl?: true
+  generateFileURL?: GenerateFileURL
+  prefix?: string
+  adapter: Adapter | null
+}
+
+export interface PluginOptions {
+  /**
+   * Whether or not to enable the plugin
+   *
+   * Default: true
+   */
+  enabled?: boolean
+  collections: Record<string, CollectionOptions>
+}

package/src/utilities/getFilePrefix.ts

@@ -0,0 +1,26 @@
+import type { CollectionConfig, PayloadRequest } from 'payload/types'
+import { IncomingUploadType } from 'payload/dist/uploads/types'
+
+export async function getFilePrefix({
+  req,
+  collection,
+}: {
+  req: PayloadRequest
+  collection: CollectionConfig
+}): Promise<string> {
+  const imageSizes = (collection?.upload as IncomingUploadType)?.imageSizes || []
+  const files = await req.payload.find({
+    collection: collection.slug,
+    where: {
+      or: [
+        {
+          filename: { equals: req.params.filename },
+        },
+        ...imageSizes.map(imageSize => ({
+          [`sizes.${imageSize.name}.filename`]: { equals: req.params.filename },
+        })),
+      ],
+    },
+  })
+  return files?.docs?.[0]?.prefix || ''
+}

package/src/utilities/getIncomingFiles.ts

@@ -0,0 +1,44 @@
+import type { FileData } from 'payload/dist/uploads/types'
+import type { PayloadRequest } from 'payload/types'
+import type { File } from '../types'
+
+export function getIncomingFiles({
+  req,
+  data,
+}: {
+  data: Partial<FileData>
+  req: PayloadRequest
+}): File[] {
+  const file = req.files?.file
+
+  let files: File[] = []
+
+  if (file && data.filename && data.mimeType) {
+    const mainFile: File = {
+      filename: data.filename,
+      mimeType: data.mimeType,
+      buffer: file.data,
+      tempFilePath: file.tempFilePath,
+      filesize: file.size,
+    }
+
+    files = [mainFile]
+
+    if (data?.sizes) {
+      Object.entries(data.sizes).forEach(([key, resizedFileData]) => {
+        if (req.payloadUploadSizes?.[key] && data.mimeType) {
+          files = files.concat([
+            {
+              filename: `${resizedFileData.filename}`,
+              mimeType: data.mimeType,
+              buffer: req.payloadUploadSizes[key],
+              filesize: req.payloadUploadSizes[key].length,
+            },
+          ])
+        }
+      })
+    }
+  }
+
+  return files
+}

package/src/utilities/getRangeFromHeader.ts

@@ -0,0 +1,27 @@
+import type { BlockBlobClient } from '@azure/storage-blob'
+import parseRange from 'range-parser'
+
+const getRangeFromHeader = async (
+  blockBlobClient: BlockBlobClient,
+  rangeHeader?: string,
+): Promise<{ start: number; end: number | undefined }> => {
+  const fullRange = { start: 0, end: undefined }
+
+  if (!rangeHeader) {
+    return fullRange
+  }
+
+  const size = await blockBlobClient.getProperties().then(props => props.contentLength)
+  if (size === undefined) {
+    return fullRange
+  }
+
+  const range = parseRange(size, rangeHeader)
+  if (range === -1 || range === -2 || range.type !== 'bytes' || range.length !== 1) {
+    return fullRange
+  }
+
+  return range[0]
+}
+
+export default getRangeFromHeader

package/src/webpack.ts

@@ -0,0 +1,48 @@
+import path from 'path'
+import type { Config } from 'payload/config'
+import type { Configuration as WebpackConfig } from 'webpack'
+import type { GeneratedAdapter, PluginOptions } from './types'
+
+interface Args {
+  config: Config
+  options: PluginOptions
+}
+
+export const extendWebpackConfig =
+  ({ config, options }: Args): ((webpackConfig: WebpackConfig) => WebpackConfig) =>
+  webpackConfig => {
+    const existingWebpackConfig =
+      typeof config.admin?.webpack === 'function'
+        ? config.admin.webpack(webpackConfig)
+        : webpackConfig
+
+    const newConfig: WebpackConfig = {
+      ...existingWebpackConfig,
+      resolve: {
+        ...(existingWebpackConfig.resolve || {}),
+        alias: {
+          ...(existingWebpackConfig.resolve?.alias ? existingWebpackConfig.resolve.alias : {}),
+          '@payloadcms/plugin-cloud-storage': path.resolve(__dirname, './admin/index.js'),
+        },
+      },
+    }
+
+    return Object.entries(options.collections).reduce(
+      (resultingWebpackConfig, [slug, collectionOptions]) => {
+        const matchedCollection = config.collections?.find(coll => coll.slug === slug)
+
+        if (matchedCollection && typeof collectionOptions.adapter === 'function') {
+          const adapter: GeneratedAdapter = collectionOptions.adapter({
+            collection: matchedCollection,
+          })
+
+          if (adapter.webpack) {
+            return adapter.webpack(resultingWebpackConfig)
+          }
+        }
+
+        return resultingWebpackConfig
+      },
+      newConfig,
+    )
+  }

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "target": "es5",
+    "outDir": "./dist",
+    "allowJs": true,
+    "module": "commonjs",
+    "sourceMap": true,
+    "jsx": "react",
+    "esModuleInterop": true,
+    "declaration": true,
+    "declarationDir": "./dist",
+    "skipLibCheck": true,
+    "strict": true,
+  },
+  "include": [
+    "src/**/*"
+  ],
+}