feat: #203 allow users to specify maximum upload size

Author: azaxarov

src/components/Tool/index.tsx

@@ -1,12 +1,17 @@
 import {Flex} from '@sanity/ui'
-import React from 'react'
+import React, {ComponentProps} from 'react'
 import Browser from '../Browser'
+import {ToolOptionsProvider} from '../../contexts/ToolOptionsContext'
+import {Tool as SanityTool} from 'sanity'
+import {MediaToolOptions} from '@types'
 
-const Tool = () => {
+const Tool = ({tool: {options}}: ComponentProps<SanityTool<MediaToolOptions>['component']>) => {
   return (
-    <Flex direction="column" height="fill" flex={1}>
-      <Browser />
-    </Flex>
+    <ToolOptionsProvider options={options}>
+      <Flex direction="column" height="fill" flex={1}>
+        <Browser />
+      </Flex>
+    </ToolOptionsProvider>
   )
 }
 

src/components/UploadDropzone/index.tsx

@@ -1,14 +1,15 @@
 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'
 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 (

src/contexts/ToolOptionsContext.tsx

@@ -0,0 +1,34 @@
+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
+}
+
+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
+}
+
+export default ToolOptionsContext

src/index.ts

@@ -1,9 +1,10 @@
-import {definePlugin, Tool as SanityTool} from 'sanity'
+import {definePlugin} 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'
+import {MediaToolOptions} from '@types'
 
 const plugin = {
   icon: ImageIcon,
@@ -16,12 +17,7 @@ export const mediaAssetSource: AssetSource = {
   component: FormBuilderTool
 }
 
-const tool = {
-  ...plugin,
-  component: Tool
-} as SanityTool
-
-export const media = definePlugin({
+export const media = definePlugin<MediaToolOptions | void>(options => ({
   name: 'media',
   form: {
     file: {
@@ -39,6 +35,13 @@ export const media = definePlugin({
     types: [mediaTag]
   },
   tools: prev => {
-    return [...prev, tool]
+    return [
+      ...prev,
+      {
+        ...plugin,
+        options,
+        component: Tool
+      }
+    ]
   }
-})
+}))

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