diff --git a/src/admin/components/forms/field-types/Upload/index.scss b/src/admin/components/forms/field-types/Upload/index.scss
index 6c657042a7..4a6dfbb292 100644
--- a/src/admin/components/forms/field-types/Upload/index.scss
+++ b/src/admin/components/forms/field-types/Upload/index.scss
@@ -8,7 +8,7 @@
   &__wrap {
     display: flex;
     padding: base(1.5) base(1.5) $baseline;
-    background: var(--theme-elevation-100);
+    background: var(--theme-elevation-50);
 
     .btn {
       margin: 0 $baseline base(.5) 0;
diff --git a/test/fields/collections/Upload/.gitignore b/test/fields/collections/Upload/.gitignore
new file mode 100644
index 0000000000..3f549faf91
--- /dev/null
+++ b/test/fields/collections/Upload/.gitignore
@@ -0,0 +1 @@
+uploads
diff --git a/test/fields/collections/Upload/index.ts b/test/fields/collections/Upload/index.ts
new file mode 100644
index 0000000000..3378880a93
--- /dev/null
+++ b/test/fields/collections/Upload/index.ts
@@ -0,0 +1,18 @@
+import { CollectionConfig } from '../../../../src/collections/config/types';
+
+const Uploads: CollectionConfig = {
+  slug: 'uploads',
+  upload: true,
+  fields: [
+    {
+      type: 'text',
+      name: 'text',
+    },
+  ],
+};
+
+export const uploadsDoc = {
+  text: 'An upload here',
+};
+
+export default Uploads;
diff --git a/test/fields/collections/Upload/payload.png b/test/fields/collections/Upload/payload.png
new file mode 100644
index 0000000000..836b5481e5
Binary files /dev/null and b/test/fields/collections/Upload/payload.png differ
diff --git a/test/fields/config.ts b/test/fields/config.ts
index 704832ef13..2dd7080b03 100644
--- a/test/fields/config.ts
+++ b/test/fields/config.ts
@@ -1,3 +1,5 @@
+import path from 'path';
+import fs from 'fs';
 import { buildConfig } from '../buildConfig';
 import { devUser } from '../credentials';
 import ArrayFields, { arrayDoc } from './collections/Array';
@@ -10,8 +12,22 @@ import TabsFields, { tabsDoc } from './collections/Tabs';
 import TextFields, { textDoc } from './collections/Text';
 import PointFields, { pointDoc } from './collections/Point';
 import GroupFields, { groupDoc } from './collections/Group';
+import getFileByPath from '../../src/uploads/getFileByPath';
+import Uploads, { uploadsDoc } from './collections/Upload';
 
 export default buildConfig({
+  admin: {
+    webpack: (config) => ({
+      ...config,
+      resolve: {
+        ...config.resolve,
+        alias: {
+          ...config?.resolve?.alias,
+          fs: path.resolve(__dirname, './mocks/emptyModule.js'),
+        },
+      },
+    }),
+  },
   collections: [
     ArrayFields,
     BlockFields,
@@ -23,6 +39,7 @@ export default buildConfig({
     SelectFields,
     TabsFields,
     TextFields,
+    Uploads,
   ],
   localization: {
     defaultLocale: 'en',
@@ -37,57 +54,28 @@ export default buildConfig({
       },
     });
 
-    await payload.create({
-      collection: 'array-fields',
-      data: arrayDoc,
-    });
+    await payload.create({ collection: 'array-fields', data: arrayDoc });
+    await payload.create({ collection: 'block-fields', data: blocksDoc });
+    await payload.create({ collection: 'collapsible-fields', data: collapsibleDoc });
+    await payload.create({ collection: 'conditional-logic', data: conditionalLogicDoc });
+    await payload.create({ collection: 'group-fields', data: groupDoc });
+    await payload.create({ collection: 'select-fields', data: selectsDoc });
+    await payload.create({ collection: 'tabs-fields', data: tabsDoc });
+    await payload.create({ collection: 'point-fields', data: pointDoc });
 
-    await payload.create({
-      collection: 'block-fields',
-      data: blocksDoc,
-    });
+    const createdTextDoc = await payload.create({ collection: 'text-fields', data: textDoc });
 
-    await payload.create({
-      collection: 'collapsible-fields',
-      data: collapsibleDoc,
-    });
+    const uploadsDir = path.resolve(__dirname, './collections/Upload/uploads');
 
-    await payload.create({
-      collection: 'conditional-logic',
-      data: conditionalLogicDoc,
-    });
+    if (fs.existsSync(uploadsDir)) fs.readdirSync(uploadsDir).forEach((f) => fs.rmSync(`${uploadsDir}/${f}`));
 
-    await payload.create({
-      collection: 'group-fields',
-      data: groupDoc,
-    });
+    const filePath = path.resolve(__dirname, './collections/Upload/payload.png');
+    const file = getFileByPath(filePath);
 
-    await payload.create({
-      collection: 'select-fields',
-      data: selectsDoc,
-    });
-
-    await payload.create({
-      collection: 'tabs-fields',
-      data: tabsDoc,
-    });
-
-    await payload.create({
-      collection: 'point-fields',
-      data: pointDoc,
-    });
-
-    const createdTextDoc = await payload.create({
-      collection: 'text-fields',
-      data: textDoc,
-    });
+    const createdUploadDoc = await payload.create({ collection: 'uploads', data: uploadsDoc, file });
 
     const richTextDocWithRelationship = { ...richTextDoc };
     richTextDocWithRelationship.richText[2].value = { id: createdTextDoc.id };
-
-    await payload.create({
-      collection: 'rich-text-fields',
-      data: richTextDocWithRelationship,
-    });
+    await payload.create({ collection: 'rich-text-fields', data: richTextDocWithRelationship });
   },
 });
diff --git a/test/fields/mocks/emptyModule.js b/test/fields/mocks/emptyModule.js
new file mode 100644
index 0000000000..ff8b4c5632
--- /dev/null
+++ b/test/fields/mocks/emptyModule.js
@@ -0,0 +1 @@
+export default {};
diff --git a/test/fields/uploads/payload.png b/test/fields/uploads/payload.png
new file mode 100644
index 0000000000..836b5481e5
Binary files /dev/null and b/test/fields/uploads/payload.png differ