docs: add images and description of drag and drop single file functio…

…nality (#3895)

* update usage.mdx

* update usage.mdx

* update image

* update image

* update usage.mdx with feedback

* update style images

* update images

* update style images

* image bug

* fix image

src/pages/components/file-uploader/style.mdx

@@ -111,12 +111,24 @@ design.
 
 <div className="image--fixed">
 
-![Structure and spacing measurements for drag and drop file uploader](images/file-uploader-style-5.png)
+![Structure and spacing measurements for drag and drop with multiple file upload functionality](images/file-uploader-style-5.png)
 
 </div>
 
 <Caption>
-  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
+</Caption>
+
+<div className="image--fixed">
+
+![Structure and spacing measurements for drag and drop with single file upload functionality](images/file-uploader-style-7.png)
+
+</div>
+
+<Caption>
+  Structure and spacing measurements for drag and drop with single file upload
+  functionality | px / rem
 </Caption>
 
 ## Sizes

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.
 
 <Row>
 <Column colLg={8}>
@@ -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.
 
 <Row>
 <Column colLg={12}>
@@ -288,6 +291,8 @@ files into an area on a page, or activating a button.
 </Column>
 </Row>
 
+### 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.
 </Column>
 </Row>
 
+<Caption>A file being dragged into the drop zone area.</Caption>
+
+<Row>
+<Column colLg={8}>
+
+![Drag and drop file uploader in context example](images/file-uploader-usage-10c.png)
+
+</Column>
+</Row>
+
+<Caption>
+  A file successfully uploaded when you can upload multiple files.
+</Caption>
+
+### 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.
+
+<Row>
+<Column colLg={8}>
+
+![Drag and drop file uploader in context example](images/file-uploader-usage-10d.png)
+
+</Column>
+</Row>
+
+<Caption>
+  A file successfully uploaded when you can only upload a single file.
+</Caption>
+
 ## References
 
 Page Laubheimer,