diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
index 317b38bb2da..edf8211aae2 100644
Binary files a/.yarn/install-state.gz and b/.yarn/install-state.gz differ
diff --git a/src/pages/components/file-uploader/images/file-uploader-style-4.png b/src/pages/components/file-uploader/images/file-uploader-style-4.png
index 4d32d6fa4d5..3187962f042 100644
Binary files a/src/pages/components/file-uploader/images/file-uploader-style-4.png and b/src/pages/components/file-uploader/images/file-uploader-style-4.png differ
diff --git a/src/pages/components/file-uploader/images/file-uploader-style-5.png b/src/pages/components/file-uploader/images/file-uploader-style-5.png
index 7e36106a684..8f500389848 100644
Binary files a/src/pages/components/file-uploader/images/file-uploader-style-5.png and b/src/pages/components/file-uploader/images/file-uploader-style-5.png differ
diff --git a/src/pages/components/file-uploader/images/file-uploader-style-6.png b/src/pages/components/file-uploader/images/file-uploader-style-6.png
index 3d0848cf1ba..878213b26aa 100644
Binary files a/src/pages/components/file-uploader/images/file-uploader-style-6.png and b/src/pages/components/file-uploader/images/file-uploader-style-6.png differ
diff --git a/src/pages/components/file-uploader/images/file-uploader-style-7.png b/src/pages/components/file-uploader/images/file-uploader-style-7.png
new file mode 100644
index 00000000000..0f933c67ad5
Binary files /dev/null and b/src/pages/components/file-uploader/images/file-uploader-style-7.png differ
diff --git a/src/pages/components/file-uploader/images/file-uploader-usage-10b.png b/src/pages/components/file-uploader/images/file-uploader-usage-10b.png
index 6b4265c3e52..e1b87321b2a 100644
Binary files a/src/pages/components/file-uploader/images/file-uploader-usage-10b.png and b/src/pages/components/file-uploader/images/file-uploader-usage-10b.png differ
diff --git a/src/pages/components/file-uploader/images/file-uploader-usage-10c.png b/src/pages/components/file-uploader/images/file-uploader-usage-10c.png
new file mode 100644
index 00000000000..7be0c92bb47
Binary files /dev/null and b/src/pages/components/file-uploader/images/file-uploader-usage-10c.png differ
diff --git a/src/pages/components/file-uploader/images/file-uploader-usage-10d.png b/src/pages/components/file-uploader/images/file-uploader-usage-10d.png
new file mode 100644
index 00000000000..15ad87962c3
Binary files /dev/null and b/src/pages/components/file-uploader/images/file-uploader-usage-10d.png differ
diff --git a/src/pages/components/file-uploader/images/file-uploader-usage-5.png b/src/pages/components/file-uploader/images/file-uploader-usage-5.png
index 1b3ee475a49..c10971f2deb 100644
Binary files a/src/pages/components/file-uploader/images/file-uploader-usage-5.png and b/src/pages/components/file-uploader/images/file-uploader-usage-5.png differ
diff --git a/src/pages/components/file-uploader/style.mdx b/src/pages/components/file-uploader/style.mdx
index 28a9fd0b4dc..bfa7d0a1b1f 100644
--- a/src/pages/components/file-uploader/style.mdx
+++ b/src/pages/components/file-uploader/style.mdx
@@ -111,12 +111,24 @@ design.
-
+
- Structure and spacing measurements for drag and drop file uploader | px / rem
+ Structure and spacing measurements for drag and drop with multiple file upload
+ functionality | px / rem
+
+
+
+
+
+
+
+
+
+ Structure and spacing measurements for drag and drop with single file upload
+ functionality | px / rem
## Sizes
diff --git a/src/pages/components/file-uploader/usage.mdx b/src/pages/components/file-uploader/usage.mdx
index 2e77cfb12db..eead419f71d 100755
--- a/src/pages/components/file-uploader/usage.mdx
+++ b/src/pages/components/file-uploader/usage.mdx
@@ -165,7 +165,8 @@ conflict with the primary action.
### Overflow
Use an ellipsis (…) if the filename extends beyond the width of its parent
-element.
+element. A tooltip should appear on hover to disclose the full length of the
+filename.
@@ -273,12 +274,14 @@ has been successfully completed.
## Drag and drop file uploader
Drag and drop file uploaders are used to directly upload files by dragging and
-dropping them into a drop zone area. Alternatively, you can also traditionally
-open files through a file selection dialog by clicking the text link description
-inside the drop zone.
+dropping them into a drop zone area. Alternatively, you can open files through a
+file selection dialog by clicking the text link description inside the drop
+zone.
The drop zone component lets users upload files by dragging and dropping the
-files into an area on a page, or activating a button.
+files into an area on a page, or activating a button. By default, the drag and
+drop file uploader allows multiple files to be dropped into the drop zone area.
+However, we also offer functionality to limit a single file to be uploaded.
@@ -288,6 +291,8 @@ files into an area on a page, or activating a button.
+### Uploading multiple files
+
When dragging files into the drop zone area, the drop zone border changes in
color and thickness to indicate the area has been activated and is ready for
files. Additionally once the cursor hits the drop zone area it changes with a
@@ -302,6 +307,40 @@ rendered by the browser you use.
+A file being dragged into the drop zone area.
+
+
+
+
+
+
+
+
+
+
+ A file successfully uploaded when you can upload multiple files.
+
+
+### Uploading a single file
+
+When using a drag and drop file uploader, if the requirement only allows a
+single file to be uploaded, drag the single file into the drop zone area to
+upload it. Once uploaded, the drop zone area will be removed to show that you
+have successfully uploaded a single file. Click the close icon in the uploaded
+file to remove it.
+
+
+
+
+
+
+
+
+
+
+ A file successfully uploaded when you can only upload a single file.
+
+
## References
Page Laubheimer,