chore(file upload): img updates

packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/file-upload-multiple.md

@@ -4,6 +4,8 @@ section: components
 subsection: file-upload
 ---
 
+import '../components.css';
+
 A file upload component is commonly found in forms, but can also live as a standalone element.
 
 *Note: This component is for both single and multiple file upload scenarios that do not require a text preview. For a single file upload that supports text preview, see the [file upload component](/components/file-upload/simple-file-upload).*
@@ -13,7 +15,9 @@ A file upload component is commonly found in forms, but can also live as a stand
 
 ### Multiple file upload component
 
-<img src="./img/elements.png" alt="Multiple File Upload" width="638"/>
+<div class="ws-docs-content-img">
+    <img src="./img/elements.svg" alt="Multiple File Upload"/>
+</div>
 
 Most multiple file upload components contain 5 basic elements:
 
@@ -38,7 +42,9 @@ Most multiple file upload components contain 5 basic elements:
 
 **Best practices:**
 
-<img src="./img/best-practices.png" alt="best practices for file upload" width="1145"/>
+<div class="ws-docs-content-img">
+    <img src="./img/best-practices.svg" alt="Best practices for file upload"/>
+</div>
 
 1. **Sizing:** Modify the drop zone to fit your context. For example, when placing the component in forms, align the width of the drop zone to the form fields.
 
@@ -58,23 +64,29 @@ The component can be set to restrict specific file types and sizes according to
 ### Upload file(s) via the Upload button
 Users have the option to upload files by clicking the button inside the drop zone. Clicking on the button prompts a file selector dialog to open. Once users select 1 or more files from the dialog, the files will populate below the drop zone on the page. The file(s) may display a loading state before uploading is successfully completed.
 
-<img src="./img/upload-via-button.png" alt="file upload using the upload button" width="1145"/>
-
+<div class="ws-docs-content-img">
+    <img src="./img/upload-via-button.svg" alt="File upload using the upload button"/>
+</div>
 
 ### Drag and drop file(s)
 Users have the option to directly upload files by dragging and dropping them into the specified drop zone area.
 
 When dragging files into the drop zone area, the drop zone changes color to indicate the active area. Once the cursor hits the drop zone area it changes with a preview of the file(s) users are about to upload. The style of cursor change is rendered by the user's browser.
 
-<img src="./img/upload-via-drag-drop.png" alt="file upload using drag and drop" width="1145"/>
-
+<div class="ws-docs-content-img">
+    <img src="./img/upload-via-drag-drop.svg" alt="File upload using drag and drop"/>
+</div>
 
 ### Loading states
 A file that is being uploaded has 3 distinct states—waiting, in progress and uploaded.
 
-<img src="./img/loading-states.png" alt="A file that is being uploaded has 3 distinct states" width="1145"/>
+<div class="ws-docs-content-img">
+    <img src="./img/loading-states.svg" alt="A file that is being uploaded has 3 distinct states"/>
+</div>
 
 ### Validation
 When a specific file cannot be uploaded successfully, the corresponding file will show an error state. Error messages should provide clear guidance to help the user resolve the error.
 
-<img src="./img/validation.png" alt="file upload with error state" width="1145"/>
+<div class="ws-docs-content-img">
+    <img src="./img/validation.svg" alt="file upload with error state"/>
+</div>

packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload/file-upload.md

@@ -4,8 +4,13 @@ section: components
 subsection: file-upload
 ---
 
+import '../components.css';
+
 ## Elements
-<img src="./img/Fileupload.png" alt="File Upload" width="442"/> 
+
+<div class="ws-docs-content-img">
+    <img src="./img/Fileupload.svg" alt="File Upload"/>
+</div>
 
 1. **Label**: Text to inform users about how they can interact with the component. The text should describe that you can either drag and drop a file into the drop zone, or click the button to upload a file.
 
@@ -31,27 +36,35 @@ When the user hovers over the file upload component, a message should appear tel
 
 ### Upload complete non-editable
 
-<img src="./img/Noneditable.png" alt="File upload with greyed out text box" width="442"/> 
+<div class="ws-docs-content-img">
+    <img src="./img/Noneditable.svg" alt="File upload with greyed out text box"/>
+</div>
 
 Once the file is uploaded, users cannot edit the text displayed. The text box should be greyed out to indicate it cannot be changed.
 
 
 ### Upload complete editable
 
-<img src="./img/editable.png" alt="File Upload with text editable" width="442"/> 
+<div class="ws-docs-content-img">
+    <img src="./img/editable.svg" alt="File Upload with text editable"/>
+</div>
 
 Once the file is uploaded, the user can edit the text displayed by clicking within the text box.
 
 
 ### Loading states
 
-<img src="./img/Loading.png" alt="File upload with loading symbol" width="442"/> 
+<div class="ws-docs-content-img">
+    <img src="./img/Loading.svg" alt="File Upload with loading symbol"/>
+</div>
 
 While a file is being uploaded, the waiting icon is displayed.
 
 
 ### Error 
 
-<img src="./img/FileError.png" alt="File upload with a an error alert" width="448"/> 
+<div class="ws-docs-content-img">
+    <img src="./img/FileError.svg" alt="File upload with a an error alert"/>
+</div>
 
 When a specific file cannot be uploaded successfully, the corresponding file will show an error state. Error messages should provide clear guidance to help the user resolve the error.