Add change event handler to file upload input

mui · Apr 11, 2024 · 745281a · 745281a
1 parent 71a880d
commit 745281a
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git a/docs/data/material/components/buttons/InputFileUpload.js b/docs/data/material/components/buttons/InputFileUpload.js
@@ -24,8 +24,12 @@ export default function InputFileUpload() {
       tabIndex={-1}
       startIcon={<CloudUploadIcon />}
     >
-      Upload file
-      <VisuallyHiddenInput type="file" />
+      Upload files
+      <VisuallyHiddenInput
+        type="file"
+        onChange={(event) => console.log(event.target.files)}
+        multiple
+      />
     </Button>
   );
 }
diff --git a/docs/data/material/components/buttons/InputFileUpload.tsx b/docs/data/material/components/buttons/InputFileUpload.tsx
@@ -24,8 +24,12 @@ export default function InputFileUpload() {
       tabIndex={-1}
       startIcon={<CloudUploadIcon />}
     >
-      Upload file
-      <VisuallyHiddenInput type="file" />
+      Upload files
+      <VisuallyHiddenInput
+        type="file"
+        onChange={(event) => console.log(event.target.files)}
+        multiple
+      />
     </Button>
   );
 }
diff --git a/docs/data/material/components/buttons/InputFileUpload.tsx.preview b/docs/data/material/components/buttons/InputFileUpload.tsx.preview
@@ -5,6 +5,10 @@
   tabIndex={-1}
   startIcon={<CloudUploadIcon />}
 >
-  Upload file
-  <VisuallyHiddenInput type="file" />
+  Upload files
+  <VisuallyHiddenInput
+    type="file"
+    onChange={(event) => console.log(event.target.files)}
+    multiple
+  />
 </Button>