fix(ui): uploading from drawer & focal point positioning

docs/migration-guide/overview.mdx

@@ -180,7 +180,6 @@ import {
   useFormInitializing,
   useFormModified,
   useFormProcessing,
-  useFormQueryParams,
   useFormSubmitted,
   useHotkey,
   useIntersect,
@@ -221,7 +220,6 @@ import {
   EntityVisibilityProvider,
   FieldComponentsProvider,
   FieldPropsProvider,
-  FormQueryParamsProvider,
   ListInfoProvider,
   ListQueryProvider,
   LocaleProvider,

packages/next/src/views/Account/index.tsx

@@ -1,6 +1,6 @@
 import type { AdminViewProps, ServerSideEditViewProps } from 'payload'
 
-import { DocumentInfoProvider, FormQueryParamsProvider, HydrateClientUser } from '@payloadcms/ui'
+import { DocumentInfoProvider, HydrateClientUser } from '@payloadcms/ui'
 import { RenderCustomComponent } from '@payloadcms/ui/shared'
 import { notFound } from 'next/navigation.js'
 import React from 'react'
@@ -65,7 +65,6 @@ export const Account: React.FC<AdminViewProps> = async ({
     return (
       <DocumentInfoProvider
         AfterFields={<Settings i18n={i18n} languageOptions={languageOptions} />}
-        action={`${serverURL}${api}/${userSlug}${user?.id ? `/${user.id}` : ''}`}
         apiURL={`${serverURL}${api}/${userSlug}${user?.id ? `/${user.id}` : ''}`}
         collectionSlug={userSlug}
         docPermissions={docPermissions}
@@ -84,31 +83,22 @@ export const Account: React.FC<AdminViewProps> = async ({
           permissions={permissions}
         />
         <HydrateClientUser permissions={permissions} user={user} />
-        <FormQueryParamsProvider
-          initialParams={{
-            depth: 0,
-            'fallback-locale': 'null',
-            locale: locale?.code,
-            uploadEdits: undefined,
+        <RenderCustomComponent
+          CustomComponent={
+            typeof CustomAccountComponent === 'function' ? CustomAccountComponent : undefined
+          }
+          DefaultComponent={EditView}
+          componentProps={viewComponentProps}
+          serverOnlyProps={{
+            i18n,
+            locale,
+            params,
+            payload,
+            permissions,
+            searchParams,
+            user,
           }}
-        >
-          <RenderCustomComponent
-            CustomComponent={
-              typeof CustomAccountComponent === 'function' ? CustomAccountComponent : undefined
-            }
-            DefaultComponent={EditView}
-            componentProps={viewComponentProps}
-            serverOnlyProps={{
-              i18n,
-              locale,
-              params,
-              payload,
-              permissions,
-              searchParams,
-              user,
-            }}
-          />
-        </FormQueryParamsProvider>
+        />
       </DocumentInfoProvider>
     )
   }

packages/next/src/views/Document/index.tsx

@@ -1,16 +1,6 @@
-import type {
-  AdminViewComponent,
-  AdminViewProps,
-  EditViewComponent,
-  ServerSideEditViewProps,
-} from 'payload'
+import type { AdminViewComponent, AdminViewProps, EditViewComponent } from 'payload'
 
-import {
-  DocumentInfoProvider,
-  EditDepthProvider,
-  FormQueryParamsProvider,
-  HydrateClientUser,
-} from '@payloadcms/ui'
+import { DocumentInfoProvider, EditDepthProvider, HydrateClientUser } from '@payloadcms/ui'
 import { RenderCustomComponent, isEditing as getIsEditing } from '@payloadcms/ui/shared'
 import { notFound, redirect } from 'next/navigation.js'
 import React from 'react'
@@ -65,7 +55,6 @@ export const Document: React.FC<AdminViewProps> = async ({
   let ErrorView: AdminViewComponent
 
   let apiURL: string
-  let action: string
 
   const { data, formState } = await getDocumentData({
     id,
@@ -88,8 +77,6 @@ export const Document: React.FC<AdminViewProps> = async ({
       notFound()
     }
 
-    action = `${serverURL}${apiRoute}/${collectionSlug}${isEditing ? `/${id}` : ''}`
-
     const params = new URLSearchParams()
     if (collectionConfig.versions?.drafts) {
       params.append('draft', 'true')
@@ -128,8 +115,6 @@ export const Document: React.FC<AdminViewProps> = async ({
       notFound()
     }
 
-    action = `${serverURL}${apiRoute}/globals/${globalSlug}`
-
     const params = new URLSearchParams({
       locale: locale?.code,
     })
@@ -198,7 +183,6 @@ export const Document: React.FC<AdminViewProps> = async ({
 
   return (
     <DocumentInfoProvider
-      action={action}
       apiURL={apiURL}
       collectionSlug={collectionConfig?.slug}
       disableActions={false}
@@ -225,34 +209,25 @@ export const Document: React.FC<AdminViewProps> = async ({
         depth={1}
         key={`${collectionSlug || globalSlug}${locale?.code ? `-${locale?.code}` : ''}`}
       >
-        <FormQueryParamsProvider
-          initialParams={{
-            depth: 0,
-            'fallback-locale': 'null',
-            locale: locale?.code,
-            uploadEdits: undefined,
-          }}
-        >
-          {ErrorView ? (
-            <ErrorView initPageResult={initPageResult} searchParams={searchParams} />
-          ) : (
-            <RenderCustomComponent
-              CustomComponent={ViewOverride || CustomView}
-              DefaultComponent={DefaultView}
-              serverOnlyProps={{
-                i18n,
-                initPageResult,
-                locale,
-                params,
-                payload,
-                permissions,
-                routeSegments: segments,
-                searchParams,
-                user,
-              }}
-            />
-          )}
-        </FormQueryParamsProvider>
+        {ErrorView ? (
+          <ErrorView initPageResult={initPageResult} searchParams={searchParams} />
+        ) : (
+          <RenderCustomComponent
+            CustomComponent={ViewOverride || CustomView}
+            DefaultComponent={DefaultView}
+            serverOnlyProps={{
+              i18n,
+              initPageResult,
+              locale,
+              params,
+              payload,
+              permissions,
+              routeSegments: segments,
+              searchParams,
+              user,
+            }}
+          />
+        )}
       </EditDepthProvider>
     </DocumentInfoProvider>
   )

packages/next/src/views/Edit/Default/index.tsx

@@ -13,7 +13,7 @@ import {
   useDocumentEvents,
   useDocumentInfo,
   useEditDepth,
-  useFormQueryParams,
+  useUploadEdits,
 } from '@payloadcms/ui'
 import { getFormState } from '@payloadcms/ui/shared'
 import { useRouter, useSearchParams } from 'next/navigation.js'
@@ -58,11 +58,13 @@ export const DefaultEditView: React.FC = () => {
   const { refreshCookieAsync, user } = useAuth()
   const config = useConfig()
   const router = useRouter()
-  const { dispatchFormQueryParams } = useFormQueryParams()
   const { getComponentMap, getFieldMap } = useComponentMap()
-  const params = useSearchParams()
   const depth = useEditDepth()
+  const params = useSearchParams()
   const { reportUpdate } = useDocumentEvents()
+  const { resetUploadEdits } = useUploadEdits()
+
+  const locale = params.get('locale')
 
   const {
     admin: { user: userSlug },
@@ -72,8 +74,6 @@ export const DefaultEditView: React.FC = () => {
     serverURL,
   } = config
 
-  const locale = params.get('locale')
-
   const collectionConfig =
     collectionSlug && collections.find((collection) => collection.slug === collectionSlug)
 
@@ -130,12 +130,7 @@ export const DefaultEditView: React.FC = () => {
         const redirectRoute = `${adminRoute}/collections/${collectionSlug}/${json?.doc?.id}${locale ? `?locale=${locale}` : ''}`
         router.push(redirectRoute)
       } else {
-        dispatchFormQueryParams({
-          type: 'SET',
-          params: {
-            uploadEdits: null,
-          },
-        })
+        resetUploadEdits()
       }
     },
     [
@@ -151,9 +146,9 @@ export const DefaultEditView: React.FC = () => {
       isEditing,
       refreshCookieAsync,
       adminRoute,
-      locale,
       router,
-      dispatchFormQueryParams,
+      locale,
+      resetUploadEdits,
     ],
   )
 

packages/payload/src/uploads/cropImage.ts

@@ -1,12 +1,31 @@
 import type { SharpOptions } from 'sharp'
 
+import type { SanitizedConfig } from '../config/types.js'
+import type { PayloadRequest } from '../types/index.js'
+import type { UploadEdits } from './types.js'
+
 export const percentToPixel = (value, dimension) => {
   return Math.floor((parseFloat(value) / 100) * dimension)
 }
 
-export async function cropImage({ cropData, dimensions, file, sharp }) {
+type CropImageArgs = {
+  cropData: UploadEdits['crop']
+  dimensions: { height: number; width: number }
+  file: PayloadRequest['file']
+  heightInPixels: number
+  sharp: SanitizedConfig['sharp']
+  widthInPixels: number
+}
+export async function cropImage({
+  cropData,
+  dimensions,
+  file,
+  heightInPixels,
+  sharp,
+  widthInPixels,
+}: CropImageArgs) {
   try {
-    const { heightPixels, widthPixels, x, y } = cropData
+    const { x, y } = cropData
 
     const fileIsAnimatedType = ['image/avif', 'image/gif', 'image/webp'].includes(file.mimetype)
 
@@ -15,10 +34,10 @@ export async function cropImage({ cropData, dimensions, file, sharp }) {
     if (fileIsAnimatedType) sharpOptions.animated = true
 
     const formattedCropData = {
-      height: Number(heightPixels),
+      height: Number(heightInPixels),
       left: percentToPixel(x, dimensions.width),
       top: percentToPixel(y, dimensions.height),
-      width: Number(widthPixels),
+      width: Number(widthInPixels),
     }
 
     const cropped = sharp(file.tempFilePath || file.data, sharpOptions).extract(formattedCropData)

packages/payload/src/uploads/generateFileData.ts

@@ -203,7 +203,14 @@ export const generateFileData = async <T>({
     let fileForResize = file
 
     if (cropData && sharp) {
-      const { data: croppedImage, info } = await cropImage({ cropData, dimensions, file, sharp })
+      const { data: croppedImage, info } = await cropImage({
+        cropData,
+        dimensions,
+        file,
+        heightInPixels: uploadEdits.heightInPixels,
+        sharp,
+        widthInPixels: uploadEdits.widthInPixels,
+      })
 
       filesToSave.push({
         buffer: croppedImage,