sanity-plugin-media 2.2.5 → 2.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-media",
-  "version": "2.2.5",
+  "version": "2.3.1",
   "description": "This version of `sanity-plugin-media` is for Sanity Studio V3.",
   "keywords": [
     "sanity",

package/src/components/UploadDropzone/index.tsx

@@ -1,7 +1,7 @@
 import {white} from '@sanity/color'
 import {Flex, Text} from '@sanity/ui'
 import React, {ReactNode} from 'react'
-import {DropEvent, useDropzone} from 'react-dropzone'
+import {DropEvent, DropzoneOptions, useDropzone} from 'react-dropzone'
 import {useDispatch} from 'react-redux'
 import styled from 'styled-components'
 import {useAssetSourceActions} from '../../contexts/AssetSourceDispatchContext'
@@ -9,6 +9,7 @@ import {DropzoneDispatchProvider} from '../../contexts/DropzoneDispatchContext'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {notificationsActions} from '../../modules/notifications'
 import {uploadsActions} from '../../modules/uploads'
+import {useToolOptions} from '../../contexts/ToolOptionsContext'
 
 type Props = {
   children: ReactNode
@@ -62,6 +63,10 @@ async function filterFiles(fileList: FileList) {
 const UploadDropzone = (props: Props) => {
   const {children} = props
 
+  const {
+    dropzone: {maxSize}
+  } = useToolOptions()
+
   const {onSelect} = useAssetSourceActions()
 
   // Redux
@@ -82,6 +87,19 @@ const UploadDropzone = (props: Props) => {
     )
   }
 
+  const handleDropRejected: DropzoneOptions['onDropRejected'] = rejections => {
+    const errorCodes = rejections.flatMap(({errors}) => errors.map(({code}) => code))
+
+    if (errorCodes.includes('file-too-large')) {
+      dispatch(
+        notificationsActions.add({
+          status: 'error',
+          title: 'One or more files exceed the maximum upload size.'
+        })
+      )
+    }
+  }
+
   // Use custom file selector to obtain files on file drop + change events (excluding folders and packages)
   const handleFileGetter = async (event: DropEvent) => {
     let fileList: FileList | undefined
@@ -123,7 +141,9 @@ const UploadDropzone = (props: Props) => {
     // HACK: Disable drag and drop functionality when in a selecting context
     // (This is currently due to Sanity's native image input taking precedence with drag and drop)
     noDrag: !!onSelect,
-    onDrop: handleDrop
+    onDrop: handleDrop,
+    maxSize,
+    onDropRejected: handleDropRejected
   })
 
   return (

package/src/contexts/ToolOptionsContext.tsx

@@ -0,0 +1,32 @@
+import {MediaToolOptions} from '@types'
+import React, {PropsWithChildren, createContext, useContext, useMemo} from 'react'
+import {DropzoneOptions} from 'react-dropzone'
+
+type ContextProps = {
+  dropzone: Pick<DropzoneOptions, 'maxSize'>
+}
+
+const ToolOptionsContext = createContext<ContextProps | null>(null)
+
+type Props = {
+  options?: MediaToolOptions | void
+}
+
+export const ToolOptionsProvider = ({options, children}: PropsWithChildren<Props>) => {
+  const value = useMemo<ContextProps>(
+    () => ({dropzone: {maxSize: options?.maximumUploadSize}}),
+    [options?.maximumUploadSize]
+  )
+
+  return <ToolOptionsContext.Provider value={value}>{children}</ToolOptionsContext.Provider>
+}
+
+export const useToolOptions = () => {
+  const context = useContext(ToolOptionsContext)
+
+  if (!context) {
+    throw new Error('useToolOptions must be used within an ToolOptionsProvider')
+  }
+
+  return context
+}

package/src/index.ts

@@ -1,44 +1,2 @@
-import {definePlugin, Tool as SanityTool} from 'sanity'
-import {ImageIcon} from '@sanity/icons'
-import type {AssetSource} from 'sanity'
-import FormBuilderTool from './components/FormBuilderTool'
-import Tool from './components/Tool'
-import mediaTag from './schemas/tag'
-
-const plugin = {
-  icon: ImageIcon,
-  name: 'media',
-  title: 'Media'
-}
-
-export const mediaAssetSource: AssetSource = {
-  ...plugin,
-  component: FormBuilderTool
-}
-
-const tool = {
-  ...plugin,
-  component: Tool
-} as SanityTool
-
-export const media = definePlugin({
-  name: 'media',
-  form: {
-    file: {
-      assetSources: prev => {
-        return [...prev, mediaAssetSource]
-      }
-    },
-    image: {
-      assetSources: prev => {
-        return [...prev, mediaAssetSource]
-      }
-    }
-  },
-  schema: {
-    types: [mediaTag]
-  },
-  tools: prev => {
-    return [...prev, tool]
-  }
-})
+export {media, mediaAssetSource} from './plugin'
+export type {MediaToolOptions} from '@types'

package/src/plugin.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import {AssetSource, Tool as SanityTool, definePlugin} from 'sanity'
+import {ImageIcon} from '@sanity/icons'
+import FormBuilderTool from './components/FormBuilderTool'
+import Tool from './components/Tool'
+import mediaTag from './schemas/tag'
+import {MediaToolOptions} from '@types'
+import {ToolOptionsProvider} from './contexts/ToolOptionsContext'
+
+const plugin = {
+  icon: ImageIcon,
+  name: 'media',
+  title: 'Media'
+}
+
+export const mediaAssetSource = {
+  ...plugin,
+  component: FormBuilderTool
+} satisfies AssetSource
+
+const tool = {
+  ...plugin,
+  component: Tool
+} satisfies SanityTool
+
+export const media = definePlugin<MediaToolOptions | void>(options => ({
+  name: 'media',
+  studio: {
+    components: {
+      layout: props => (
+        <ToolOptionsProvider options={options}>{props.renderDefault(props)}</ToolOptionsProvider>
+      )
+    }
+  },
+  form: {
+    file: {
+      assetSources: prev => {
+        return [...prev, mediaAssetSource]
+      }
+    },
+    image: {
+      assetSources: prev => {
+        return [...prev, mediaAssetSource]
+      }
+    }
+  },
+  schema: {
+    types: [mediaTag]
+  },
+  tools: prev => {
+    return [...prev, tool]
+  }
+}))

package/src/types/index.ts

@@ -10,6 +10,10 @@ import * as z from 'zod'
 import {assetFormSchema, tagFormSchema, tagOptionSchema} from '../formSchema'
 import {RootReducerState} from '../modules/types'
 
+export type MediaToolOptions = {
+  maximumUploadSize?: number
+}
+
 type CustomFields = {
   altText?: string
   description?: string