fix: uploads from drawer and focal point positioning (#7244)

## Description

V3 PR [here](https://github.com/payloadcms/payload/pull/7117)

- [x] I have read and understand the
[CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md)
document in this repository.

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## Checklist:

- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] Existing test suite passes locally with my changes

test/uploads/e2e.spec.ts

@@ -16,6 +16,7 @@ import {
   adminThumbnailSlug,
   animatedTypeMedia,
   audioSlug,
+  focalOnlySlug,
   globalWithMedia,
   mediaSlug,
   relationSlug,
@@ -30,6 +31,7 @@ let audioURL: AdminUrlUtil
 let relationURL: AdminUrlUtil
 let adminThumbnailURL: AdminUrlUtil
 let globalURL: string
+let focalOnlyURL: AdminUrlUtil
 
 describe('uploads', () => {
   let page: Page
@@ -47,6 +49,7 @@ describe('uploads', () => {
     relationURL = new AdminUrlUtil(serverURL, relationSlug)
     adminThumbnailURL = new AdminUrlUtil(serverURL, adminThumbnailSlug)
     globalURL = new AdminUrlUtil(serverURL, globalWithMedia).global(globalWithMedia)
+    focalOnlyURL = new AdminUrlUtil(serverURL, focalOnlySlug)
 
     const context = await browser.newContext()
     page = await context.newPage()
@@ -125,6 +128,25 @@ describe('uploads', () => {
     await saveDocAndAssert(page)
   })
 
+  test('should show proper file names for resized animated file', async () => {
+    await page.goto(animatedTypeMediaURL.create)
+
+    await page.setInputFiles('input[type="file"]', path.resolve(__dirname, './animated.webp'))
+    const animatedFilename = page.locator('.file-field__filename')
+
+    await expect(animatedFilename).toHaveValue('animated.webp')
+
+    await saveDocAndAssert(page)
+
+    await page.locator('.file-field__previewSizes').click()
+
+    const smallSquareFilename = page
+      .locator('.preview-sizes__list .preview-sizes__sizeOption')
+      .nth(1)
+      .locator('.file-meta__url a')
+    await expect(smallSquareFilename).toContainText(/480x480\.webp$/)
+  })
+
   test('should show resized images', async () => {
     await page.goto(mediaURL.edit(pngDoc.id))
 
@@ -353,6 +375,43 @@ describe('uploads', () => {
       expect(greenDoc.filesize).toEqual(1205)
       expect(redDoc.filesize).toEqual(1207)
     })
+
+    test('should update image alignment based on focal point', async () => {
+      const updateFocalPosition = async (page: Page) => {
+        await page.goto(focalOnlyURL.create)
+        await page.waitForURL(focalOnlyURL.create)
+        // select and upload file
+        const fileChooserPromise = page.waitForEvent('filechooser')
+        await page.getByText('Select a file').click()
+        const fileChooser = await fileChooserPromise
+        await wait(1000)
+        await fileChooser.setFiles(path.join(__dirname, 'horizontal-squares.jpg'))
+
+        await page.locator('.file-field__edit').click()
+
+        // set focal point
+        await page.locator('.edit-upload__input input[name="X %"]').fill('12') // left focal point
+        await page.locator('.edit-upload__input input[name="Y %"]').fill('50') // top focal point
+
+        // apply focal point
+        await page.locator('button:has-text("Apply Changes")').click()
+        await page.waitForSelector('button#action-save')
+        await page.locator('button#action-save').click()
+        await wait(1000) // Wait for the save
+      }
+
+      await updateFocalPosition(page) // red square
+      const redSquareMediaID = page.url().split('/').pop() // get the ID of the doc
+
+      const { doc: redDoc } = await client.findByID({
+        id: redSquareMediaID,
+        slug: focalOnlySlug,
+        auth: true,
+      })
+
+      // without focal point update this generated size was equal to 1736
+      expect(redDoc.sizes.focalTest.filesize).toEqual(1598)
+    })
   })
 
   describe('globals', () => {