fix(ui): render preview sizes button when adjustments are disabled but image sizes are defined (#12999)

### What? The "Preview Sizes" button in the file upload UI was not showing up if: - `crop` and `focalPoint` were both `false` - No `customUploadActions` were provided - But image sizes were configured ### Why? This happened because `UploadActions` wasn’t rendered at all unless adjustments or custom actions were present. ### How? Update the conditional in `StaticFileDetails` to also render `UploadActions` when: - `hasImageSizes` is `true` and the document has a `filename` Fixes #12832

Author: PatrikKozak

packages/ui/src/elements/FileDetails/StaticFileDetails/index.tsx

@@ -63,7 +63,7 @@ export const StaticFileDetails: React.FC<StaticFileDetailsProps> = (props) => {
  width={width as number}
  />
 
- {(enableAdjustments || customUploadActions) && (
+ {(enableAdjustments || (hasImageSizes && doc.filename) || customUploadActions) && (
  <UploadActions
  customActions={customUploadActions}
  enableAdjustments={Boolean(enableAdjustments)}

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

@@ -304,15 +304,16 @@ export const Upload_v4: React.FC<UploadProps_v4> = (props) => {
  setUploadStatus('failed')
  }
  }, [
+ api,
+ collectionSlug,
  fileUrl,
- uploadConfig,
- setUploadStatus,
  handleFileChange,
- useServerSideFetch,
- collectionSlug,
  id,
  serverURL,
- api,
+ setUploadStatus,
+ uploadConfig,
+ uploadControlFileName,
+ useServerSideFetch,
  ])
 
  useEffect(() => {

test/uploads/config.ts

@@ -23,6 +23,7 @@ import {
  enlargeSlug,
  focalNoSizesSlug,
  hideFileInputOnCreateSlug,
+ imageSizesOnlySlug,
  listViewPreviewSlug,
  mediaSlug,
  mediaWithoutCacheTagsSlug,
@@ -296,6 +297,26 @@ export default buildConfigWithDefaults({
  staticDir: path.resolve(dirname, './focal-only'),
  },
  },
+ {
+ slug: imageSizesOnlySlug,
+ fields: [],
+ upload: {
+ crop: false,
+ focalPoint: false,
+ imageSizes: [
+ {
+ name: 'sizeOne',
+ height: 300,
+ width: 400,
+ },
+ {
+ name: 'sizeTwo',
+ height: 400,
+ width: 300,
+ },
+ ],
+ },
+ },
  {
  slug: focalNoSizesSlug,
  fields: [],

test/uploads/e2e.spec.ts

@@ -33,6 +33,7 @@ import {
  customUploadFieldSlug,
  focalOnlySlug,
  hideFileInputOnCreateSlug,
+ imageSizesOnlySlug,
  listViewPreviewSlug,
  mediaSlug,
  mediaWithoutCacheTagsSlug,
@@ -64,6 +65,7 @@ let adminThumbnailWithSearchQueriesURL: AdminUrlUtil
 let listViewPreviewURL: AdminUrlUtil
 let mediaWithoutCacheTagsSlugURL: AdminUrlUtil
 let focalOnlyURL: AdminUrlUtil
+let imageSizesOnlyURL: AdminUrlUtil
 let withMetadataURL: AdminUrlUtil
 let withoutMetadataURL: AdminUrlUtil
 let withOnlyJPEGMetadataURL: AdminUrlUtil
@@ -103,6 +105,7 @@ describe('Uploads', () => {
  listViewPreviewURL = new AdminUrlUtil(serverURL, listViewPreviewSlug)
  mediaWithoutCacheTagsSlugURL = new AdminUrlUtil(serverURL, mediaWithoutCacheTagsSlug)
  focalOnlyURL = new AdminUrlUtil(serverURL, focalOnlySlug)
+ imageSizesOnlyURL = new AdminUrlUtil(serverURL, imageSizesOnlySlug)
  withMetadataURL = new AdminUrlUtil(serverURL, withMetadataSlug)
  withoutMetadataURL = new AdminUrlUtil(serverURL, withoutMetadataSlug)
  withOnlyJPEGMetadataURL = new AdminUrlUtil(serverURL, withOnlyJPEGMetadataSlug)
@@ -872,6 +875,23 @@ describe('Uploads', () => {
  expect(href).not.toMatch(/-\d+x\d+\.png$/)
  })
 
+ test('should show preview button if image sizes are defined but crop and focal point are not', async () => {
+ await page.goto(imageSizesOnlyURL.create)
+
+ 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, 'test-image.jpg'))
+
+ await page.waitForSelector('button#action-save')
+ await page.locator('button#action-save').click()
+ await expect(page.locator('.payload-toast-container')).toContainText('successfully')
+ await wait(1000) // Wait for the save
+
+ await expect(page.locator('.file-field__previewSizes')).toBeVisible()
+ })
+
  describe('bulk uploads', () => {
  test('should bulk upload multiple files', async () => {
  // Navigate to the upload creation page

test/uploads/payload-types.ts

@@ -78,9 +78,12 @@ export interface Config {
  'with-only-jpeg-meta-data': WithOnlyJpegMetaDatum;
  'crop-only': CropOnly;
  'focal-only': FocalOnly;
+ 'image-sizes-only': ImageSizesOnly;
  'focal-no-sizes': FocalNoSize;
  media: Media;
  'allow-list-media': AllowListMedia;
+ 'skip-safe-fetch-media': SkipSafeFetchMedia;
+ 'skip-allow-list-safe-fetch-media': SkipAllowListSafeFetchMedia;
  'animated-type-media': AnimatedTypeMedia;
  enlarge: Enlarge;
  'without-enlarge': WithoutEnlarge;
@@ -126,9 +129,12 @@ export interface Config {
  'with-only-jpeg-meta-data': WithOnlyJpegMetaDataSelect<false> | WithOnlyJpegMetaDataSelect<true>;
  'crop-only': CropOnlySelect<false> | CropOnlySelect<true>;
  'focal-only': FocalOnlySelect<false> | FocalOnlySelect<true>;
+ 'image-sizes-only': ImageSizesOnlySelect<false> | ImageSizesOnlySelect<true>;
  'focal-no-sizes': FocalNoSizesSelect<false> | FocalNoSizesSelect<true>;
  media: MediaSelect<false> | MediaSelect<true>;
  'allow-list-media': AllowListMediaSelect<false> | AllowListMediaSelect<true>;
+ 'skip-safe-fetch-media': SkipSafeFetchMediaSelect<false> | SkipSafeFetchMediaSelect<true>;
+ 'skip-allow-list-safe-fetch-media': SkipAllowListSafeFetchMediaSelect<false> | SkipAllowListSafeFetchMediaSelect<true>;
  'animated-type-media': AnimatedTypeMediaSelect<false> | AnimatedTypeMediaSelect<true>;
  enlarge: EnlargeSelect<false> | EnlargeSelect<true>;
  'without-enlarge': WithoutEnlargeSelect<false> | WithoutEnlargeSelect<true>;
@@ -720,6 +726,42 @@ export interface FocalOnly {
  };
  };
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "image-sizes-only".
+ */
+export interface ImageSizesOnly {
+ id: string;
+ updatedAt: string;
+ createdAt: string;
+ url?: string | null;
+ thumbnailURL?: string | null;
+ filename?: string | null;
+ mimeType?: string | null;
+ filesize?: number | null;
+ width?: number | null;
+ height?: number | null;
+ focalX?: number | null;
+ focalY?: number | null;
+ sizes?: {
+ sizeOne?: {
+ url?: string | null;
+ width?: number | null;
+ height?: number | null;
+ mimeType?: string | null;
+ filesize?: number | null;
+ filename?: string | null;
+ };
+ sizeTwo?: {
+ url?: string | null;
+ width?: number | null;
+ height?: number | null;
+ mimeType?: string | null;
+ filesize?: number | null;
+ filename?: string | null;
+ };
+ };
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "focal-no-sizes".
@@ -756,6 +798,42 @@ export interface AllowListMedia {
  focalX?: number | null;
  focalY?: number | null;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "skip-safe-fetch-media".
+ */
+export interface SkipSafeFetchMedia {
+ id: string;
+ updatedAt: string;
+ createdAt: string;
+ url?: string | null;
+ thumbnailURL?: string | null;
+ filename?: string | null;
+ mimeType?: string | null;
+ filesize?: number | null;
+ width?: number | null;
+ height?: number | null;
+ focalX?: number | null;
+ focalY?: number | null;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "skip-allow-list-safe-fetch-media".
+ */
+export interface SkipAllowListSafeFetchMedia {
+ id: string;
+ updatedAt: string;
+ createdAt: string;
+ url?: string | null;
+ thumbnailURL?: string | null;
+ filename?: string | null;
+ mimeType?: string | null;
+ filesize?: number | null;
+ width?: number | null;
+ height?: number | null;
+ focalX?: number | null;
+ focalY?: number | null;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "animated-type-media".
@@ -1402,6 +1480,13 @@ export interface User {
  hash?: string | null;
  loginAttempts?: number | null;
  lockUntil?: string | null;
+ sessions?:
+ | {
+ id: string;
+ createdAt?: string | null;
+ expiresAt: string;
+ }[]
+ | null;
  password?: string | null;
 }
 /**
@@ -1455,6 +1540,10 @@ export interface PayloadLockedDocument {
  relationTo: 'focal-only';
  value: string | FocalOnly;
  } | null)
+ | ({
+ relationTo: 'image-sizes-only';
+ value: string | ImageSizesOnly;
+ } | null)
  | ({
  relationTo: 'focal-no-sizes';
  value: string | FocalNoSize;
@@ -1467,6 +1556,14 @@ export interface PayloadLockedDocument {
  relationTo: 'allow-list-media';
  value: string | AllowListMedia;
  } | null)
+ | ({
+ relationTo: 'skip-safe-fetch-media';
+ value: string | SkipSafeFetchMedia;
+ } | null)
+ | ({
+ relationTo: 'skip-allow-list-safe-fetch-media';
+ value: string | SkipAllowListSafeFetchMedia;
+ } | null)
  | ({
  relationTo: 'animated-type-media';
  value: string | AnimatedTypeMedia;
@@ -1997,6 +2094,47 @@ export interface FocalOnlySelect<T extends boolean = true> {
  };
  };
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "image-sizes-only_select".
+ */
+export interface ImageSizesOnlySelect<T extends boolean = true> {
+ updatedAt?: T;
+ createdAt?: T;
+ url?: T;
+ thumbnailURL?: T;
+ filename?: T;
+ mimeType?: T;
+ filesize?: T;
+ width?: T;
+ height?: T;
+ focalX?: T;
+ focalY?: T;
+ sizes?:
+ | T
+ | {
+ sizeOne?:
+ | T
+ | {
+ url?: T;
+ width?: T;
+ height?: T;
+ mimeType?: T;
+ filesize?: T;
+ filename?: T;
+ };
+ sizeTwo?:
+ | T
+ | {
+ url?: T;
+ width?: T;
+ height?: T;
+ mimeType?: T;
+ filesize?: T;
+ filename?: T;
+ };
+ };
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "focal-no-sizes_select".
@@ -2212,6 +2350,40 @@ export interface AllowListMediaSelect<T extends boolean = true> {
  focalX?: T;
  focalY?: T;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "skip-safe-fetch-media_select".
+ */
+export interface SkipSafeFetchMediaSelect<T extends boolean = true> {
+ updatedAt?: T;
+ createdAt?: T;
+ url?: T;
+ thumbnailURL?: T;
+ filename?: T;
+ mimeType?: T;
+ filesize?: T;
+ width?: T;
+ height?: T;
+ focalX?: T;
+ focalY?: T;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "skip-allow-list-safe-fetch-media_select".
+ */
+export interface SkipAllowListSafeFetchMediaSelect<T extends boolean = true> {
+ updatedAt?: T;
+ createdAt?: T;
+ url?: T;
+ thumbnailURL?: T;
+ filename?: T;
+ mimeType?: T;
+ filesize?: T;
+ width?: T;
+ height?: T;
+ focalX?: T;
+ focalY?: T;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "animated-type-media_select".
@@ -2907,6 +3079,13 @@ export interface UsersSelect<T extends boolean = true> {
  hash?: T;
  loginAttempts?: T;
  lockUntil?: T;
+ sessions?:
+ | T
+ | {
+ id?: T;
+ createdAt?: T;
+ expiresAt?: T;
+ };
 }
 /**
  * This interface was referenced by `Config`'s JSON-Schema

test/uploads/shared.ts

@@ -6,6 +6,7 @@ export const enlargeSlug = 'enlarge'
 export const withoutEnlargeSlug = 'without-enlarge'
 export const focalNoSizesSlug = 'focal-no-sizes'
 export const focalOnlySlug = 'focal-only'
+export const imageSizesOnlySlug = 'image-sizes-only'
 export const reduceSlug = 'reduce'
 export const relationPreviewSlug = 'relation-preview'
 export const mediaWithRelationPreviewSlug = 'media-with-relation-preview'