From 82a19cc853ad9fcd717f53fbb85651c55417de2b Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Fri, 11 Feb 2022 18:14:48 +0900
Subject: [PATCH 1/2] FormFileUpload: Add Storybook stories

---
 .../src/form-file-upload/stories/index.js     | 51 +++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 packages/components/src/form-file-upload/stories/index.js

diff --git a/packages/components/src/form-file-upload/stories/index.js b/packages/components/src/form-file-upload/stories/index.js
new file mode 100644
index 00000000000000..4c367c96c8165f
--- /dev/null
+++ b/packages/components/src/form-file-upload/stories/index.js
@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+import { upload as uploadIcon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import FormFileUpload from '../';
+
+export default {
+	title: 'Components/FormFileUpload',
+	component: FormFileUpload,
+};
+
+export const Default = FormFileUpload.bind( {} );
+Default.args = {
+	accept: '',
+	children: 'Select file',
+	multiple: false,
+};
+
+export const RestrictFileTypes = FormFileUpload.bind( {} );
+RestrictFileTypes.args = {
+	...Default.args,
+	accept: 'image/*',
+	children: 'Select image',
+	multiple: false,
+};
+
+export const AllowMultipleFiles = FormFileUpload.bind( {} );
+AllowMultipleFiles.args = {
+	...Default.args,
+	children: 'Select files',
+	multiple: true,
+};
+
+export const WithIcon = FormFileUpload.bind( {} );
+WithIcon.args = {
+	...Default.args,
+	children: 'Upload',
+	icon: uploadIcon,
+};
+
+export const WithCustomRender = FormFileUpload.bind( {} );
+WithCustomRender.args = {
+	...Default.args,
+	render: ( { openFileDialog } ) => (
+		<button onClick={ openFileDialog }>Custom Upload Button</button>
+	),
+};

From 0fc40f9bee328b116d0d4b86e98941493e9fac7f Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Fri, 11 Feb 2022 18:28:38 +0900
Subject: [PATCH 2/2] Improve example in readme

---
 packages/components/src/form-file-upload/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/form-file-upload/README.md b/packages/components/src/form-file-upload/README.md
index 18008e0f121d7c..5c0244b9e07f42 100644
--- a/packages/components/src/form-file-upload/README.md
+++ b/packages/components/src/form-file-upload/README.md
@@ -8,7 +8,7 @@ import { FormFileUpload } from '@wordpress/components';
 const MyFormFileUpload = () => (
 	<FormFileUpload
 		accept="image/*"
-		onChange={ () => console.log( 'new image' ) }
+		onChange={ ( event ) => console.log( event.target.files ) }
 	>
 		Upload
 	</FormFileUpload>