diff --git a/packages/ui/src/elements/EditUpload/index.tsx b/packages/ui/src/elements/EditUpload/index.tsx
index 6528addb3d..ba923f0cdd 100644
--- a/packages/ui/src/elements/EditUpload/index.tsx
+++ b/packages/ui/src/elements/EditUpload/index.tsx
@@ -175,7 +175,7 @@ export const EditUpload: React.FC<EditUploadProps> = ({
     setFocalPosition({ x: xCenter, y: yCenter })
   }
 
-  const fileSrcToUse = imageCacheTag ? `${fileSrc}?${imageCacheTag}` : fileSrc
+  const fileSrcToUse = imageCacheTag ? `${fileSrc}?${encodeURIComponent(imageCacheTag)}` : fileSrc
 
   return (
     <div className={baseClass}>
diff --git a/packages/ui/src/elements/PreviewSizes/index.tsx b/packages/ui/src/elements/PreviewSizes/index.tsx
index c997aae52e..a33041cd9e 100644
--- a/packages/ui/src/elements/PreviewSizes/index.tsx
+++ b/packages/ui/src/elements/PreviewSizes/index.tsx
@@ -95,7 +95,7 @@ export const PreviewSizes: React.FC<PreviewSizesProps> = ({ doc, imageCacheTag,
       return null
     }
     if (doc.url) {
-      return `${doc.url}${imageCacheTag ? `?${imageCacheTag}` : ''}`
+      return `${doc.url}${imageCacheTag ? `?${encodeURIComponent(imageCacheTag)}` : ''}`
     }
   }
   useEffect(() => {
diff --git a/packages/ui/src/elements/Thumbnail/index.tsx b/packages/ui/src/elements/Thumbnail/index.tsx
index 5e732a217e..466322f012 100644
--- a/packages/ui/src/elements/Thumbnail/index.tsx
+++ b/packages/ui/src/elements/Thumbnail/index.tsx
@@ -50,7 +50,7 @@ export const Thumbnail: React.FC<ThumbnailProps> = (props) => {
    */
   if (fileSrc) {
     const queryChar = fileSrc?.includes('?') ? '&' : '?'
-    src = imageCacheTag ? `${fileSrc}${queryChar}${imageCacheTag}` : fileSrc
+    src = imageCacheTag ? `${fileSrc}${queryChar}${encodeURIComponent(imageCacheTag)}` : fileSrc
   }
 
   return (
@@ -100,7 +100,7 @@ export function ThumbnailComponent(props: ThumbnailComponentProps) {
    */
   if (fileSrc) {
     const queryChar = fileSrc?.includes('?') ? '&' : '?'
-    src = imageCacheTag ? `${fileSrc}${queryChar}${imageCacheTag}` : fileSrc
+    src = imageCacheTag ? `${fileSrc}${queryChar}${encodeURIComponent(imageCacheTag)}` : fileSrc
   }
 
   return (
diff --git a/test/uploads/e2e.spec.ts b/test/uploads/e2e.spec.ts
index 8c9a429d35..819e7e1393 100644
--- a/test/uploads/e2e.spec.ts
+++ b/test/uploads/e2e.spec.ts
@@ -22,20 +22,20 @@ import { RESTClient } from '../helpers/rest.js'
 import { TEST_TIMEOUT_LONG } from '../playwright.config.js'
 import {
   adminThumbnailFunctionSlug,
-  adminThumbnailWithSearchQueries,
-  mediaWithoutCacheTagsSlug,
   adminThumbnailSizeSlug,
+  adminThumbnailWithSearchQueries,
   animatedTypeMedia,
   audioSlug,
   customFileNameMediaSlug,
+  customUploadFieldSlug,
   focalOnlySlug,
   mediaSlug,
+  mediaWithoutCacheTagsSlug,
   relationPreviewSlug,
   relationSlug,
   withMetadataSlug,
   withOnlyJPEGMetadataSlug,
   withoutMetadataSlug,
-  customUploadFieldSlug,
 } from './shared.js'
 import { startMockCorsServer } from './startMockCorsServer.js'
 const filename = fileURLToPath(import.meta.url)
@@ -500,9 +500,9 @@ describe('Uploads', () => {
     /**
      * Regex matcher for date cache tags.
      *
-     * @example it will match `?2022-01-01T00:00:00.000Z`
+     * @example it will match `?2022-01-01T00%3A00%3A00.000Z` (`?2022-01-01T00:00:00.000Z` encoded)
      */
-    const cacheTagPattern = /\?\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/
+    const cacheTagPattern = /\?\d{4}-\d{2}-\d{2}T\d{2}%3A\d{2}%3A\d{2}\.\d{3}Z/
 
     expect(src).not.toMatch(cacheTagPattern)
   })
@@ -530,9 +530,9 @@ describe('Uploads', () => {
     /**
      * Regex matcher for date cache tags.
      *
-     * @example it will match `?2022-01-01T00:00:00.000Z`
+     * @example it will match `?2022-01-01T00%3A00%3A00.000Z` (`?2022-01-01T00:00:00.000Z` encoded)
      */
-    const cacheTagPattern = /\?\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/
+    const cacheTagPattern = /\?\d{4}-\d{2}-\d{2}T\d{2}%3A\d{2}%3A\d{2}\.\d{3}Z/
 
     expect(src).toMatch(cacheTagPattern)
   })
@@ -857,7 +857,7 @@ describe('Uploads', () => {
   })
 
   describe('remote url fetching', () => {
-    beforeAll(async () => {
+    beforeAll(() => {
       mockCorsServer = startMockCorsServer()
     })