From c4bcb03f7b69bf719cc2f56c46178b8c66c0904d Mon Sep 17 00:00:00 2001
From: Andy Le <andy.le@ucdenver.edu>
Date: Mon, 4 Sep 2023 12:44:19 -0600
Subject: [PATCH] [material-ui][Button] Add demo for file upload (#38786)

---
 .../components/buttons/InputFileUpload.js     | 30 +++++++++++++++++++
 .../components/buttons/InputFileUpload.tsx    | 30 +++++++++++++++++++
 .../buttons/InputFileUpload.tsx.preview       |  9 ++++++
 .../material/components/buttons/buttons.md    |  6 ++++
 4 files changed, 75 insertions(+)
 create mode 100644 docs/data/material/components/buttons/InputFileUpload.js
 create mode 100644 docs/data/material/components/buttons/InputFileUpload.tsx
 create mode 100644 docs/data/material/components/buttons/InputFileUpload.tsx.preview

diff --git a/docs/data/material/components/buttons/InputFileUpload.js b/docs/data/material/components/buttons/InputFileUpload.js
new file mode 100644
index 00000000000000..f053ce2dd2c511
--- /dev/null
+++ b/docs/data/material/components/buttons/InputFileUpload.js
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import Button from '@mui/material/Button';
+import CloudUploadIcon from '@mui/icons-material/CloudUpload';
+
+const VisuallyHiddenInput = styled('input')`
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  white-space: nowrap;
+  width: 1px;
+`;
+
+export default function InputFileUpload() {
+  return (
+    <Button
+      component="label"
+      variant="contained"
+      startIcon={<CloudUploadIcon />}
+      href="#file-upload"
+    >
+      Upload a file
+      <VisuallyHiddenInput type="file" />
+    </Button>
+  );
+}
diff --git a/docs/data/material/components/buttons/InputFileUpload.tsx b/docs/data/material/components/buttons/InputFileUpload.tsx
new file mode 100644
index 00000000000000..f053ce2dd2c511
--- /dev/null
+++ b/docs/data/material/components/buttons/InputFileUpload.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import Button from '@mui/material/Button';
+import CloudUploadIcon from '@mui/icons-material/CloudUpload';
+
+const VisuallyHiddenInput = styled('input')`
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  white-space: nowrap;
+  width: 1px;
+`;
+
+export default function InputFileUpload() {
+  return (
+    <Button
+      component="label"
+      variant="contained"
+      startIcon={<CloudUploadIcon />}
+      href="#file-upload"
+    >
+      Upload a file
+      <VisuallyHiddenInput type="file" />
+    </Button>
+  );
+}
diff --git a/docs/data/material/components/buttons/InputFileUpload.tsx.preview b/docs/data/material/components/buttons/InputFileUpload.tsx.preview
new file mode 100644
index 00000000000000..7763b53206c8ad
--- /dev/null
+++ b/docs/data/material/components/buttons/InputFileUpload.tsx.preview
@@ -0,0 +1,9 @@
+<Button
+  component="label"
+  variant="contained"
+  startIcon={<CloudUploadIcon />}
+  href="#file-upload"
+>
+  Upload a file
+  <VisuallyHiddenInput type="file" />
+</Button>
\ No newline at end of file
diff --git a/docs/data/material/components/buttons/buttons.md b/docs/data/material/components/buttons/buttons.md
index 85e4cf967600c4..4e0f80aba7a8c8 100644
--- a/docs/data/material/components/buttons/buttons.md
+++ b/docs/data/material/components/buttons/buttons.md
@@ -112,6 +112,12 @@ Use `color` prop to apply theme color palette to component.
 
 {{"demo": "IconButtonColors.js"}}
 
+## File upload
+
+To create a file upload button, turn the button into a label using `component="label"` and then create a visually-hidden input with type `file`.
+
+{{"demo": "InputFileUpload.js"}}
+
 ## Customization
 
 Here are some examples of customizing the component.