[material-ui][Button] Add demo for file upload (mui#38786)

mnajdova · Sep 8, 2023 · c4bcb03 · c4bcb03
1 parent 25026a9
commit c4bcb03
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 0 deletions.
diff --git a/docs/data/material/components/buttons/InputFileUpload.js 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
@@ -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
@@ -0,0 +1,9 @@
+<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/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.