fix(ui): hide 'Create new' button entirely if user has no access to create a media item (#7348)

Makes it so that if you don't have access to create a new media you
don't get the button shown at all:

![image](https://github.com/user-attachments/assets/2a9c1b24-a4cb-41f3-9145-514cd51a2f1f)

packages/eslint-config/configs/react/index.mjs

@@ -38,6 +38,9 @@ export const index = deepMerge(
         version: 'detect',
       },
     },
+    rules: {
+      'react-hooks/rules-of-hooks': 'warn',
+    },
   },
 )
 export default index

packages/ui/src/fields/Upload/Input.tsx

@@ -23,6 +23,10 @@ import './index.scss'
 const baseClass = 'upload'
 
 export type UploadInputProps = {
+  /**
+   * Controls the visibility of the "Create new collection" button
+   */
+  allowNewUpload?: boolean
   api?: string
   collection?: ClientCollectionConfig
   customUploadActions?: React.ReactNode[]
@@ -39,6 +43,7 @@ export const UploadInput: React.FC<UploadInputProps> = (props) => {
     CustomDescription,
     CustomError,
     CustomLabel,
+    allowNewUpload,
     api = '/api',
     className,
     collection,
@@ -164,13 +169,18 @@ export const UploadInput: React.FC<UploadInputProps> = (props) => {
               {(!fileDoc || missingFile) && (
                 <div className={`${baseClass}__wrap`}>
                   <div className={`${baseClass}__buttons`}>
-                    <DocumentDrawerToggler className={`${baseClass}__toggler`} disabled={readOnly}>
-                      <Button buttonStyle="secondary" disabled={readOnly} el="div">
-                        {t('fields:uploadNewLabel', {
-                          label: getTranslation(collection.labels.singular, i18n),
-                        })}
-                      </Button>
-                    </DocumentDrawerToggler>
+                    {allowNewUpload && (
+                      <DocumentDrawerToggler
+                        className={`${baseClass}__toggler`}
+                        disabled={readOnly}
+                      >
+                        <Button buttonStyle="secondary" disabled={readOnly} el="div">
+                          {t('fields:uploadNewLabel', {
+                            label: getTranslation(collection.labels.singular, i18n),
+                          })}
+                        </Button>
+                      </DocumentDrawerToggler>
+                    )}
                     <ListDrawerToggler className={`${baseClass}__toggler`} disabled={readOnly}>
                       <Button buttonStyle="secondary" disabled={readOnly} el="div">
                         {t('fields:chooseFromExisting')}

packages/ui/src/fields/Upload/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useCallback } from 'react'
+import React, { useCallback, useMemo } from 'react'
 
 import type { UploadInputProps } from './Input.js'
 import type { UploadFieldProps } from './types.js'
@@ -8,6 +8,7 @@ import type { UploadFieldProps } from './types.js'
 import { useFieldProps } from '../../forms/FieldPropsProvider/index.js'
 import { useField } from '../../forms/useField/index.js'
 import { withCondition } from '../../forms/withCondition/index.js'
+import { useAuth } from '../../providers/Auth/index.js'
 import { useConfig } from '../../providers/Config/index.js'
 import { UploadInput } from './Input.js'
 import './index.scss'
@@ -36,10 +37,12 @@ const _Upload: React.FC<UploadFieldProps> = (props) => {
 
   const {
     collections,
-    routes: { api },
+    routes: { api: apiRoute },
     serverURL,
   } = useConfig()
 
+  const { permissions } = useAuth()
+
   const collection = collections.find((coll) => coll.slug === relationTo)
 
   const memoizedValidate = useCallback(
@@ -53,6 +56,17 @@ const _Upload: React.FC<UploadFieldProps> = (props) => {
 
   const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps()
 
+  // Checks if the user has permissions to create a new document in the related collection
+  const canCreate = useMemo(() => {
+    if (permissions?.collections && permissions.collections?.[relationTo]?.create) {
+      if (permissions.collections[relationTo].create?.permission === true) {
+        return true
+      }
+    }
+
+    return false
+  }, [relationTo, permissions])
+
   const { filterOptions, formInitializing, formProcessing, path, setValue, showError, value } =
     useField<string>({
       path: pathFromContext ?? pathFromProps,
@@ -75,7 +89,8 @@ const _Upload: React.FC<UploadFieldProps> = (props) => {
         CustomDescription={CustomDescription}
         CustomError={CustomError}
         CustomLabel={CustomLabel}
-        api={api}
+        allowNewUpload={canCreate}
+        api={apiRoute}
         className={className}
         collection={collection}
         descriptionProps={descriptionProps}