FormFileUpload: Add Storybook stories

[mirka]

Part of #36128
In preparation for #37555

Description

Adds missing stories for the FormFileUpload component.

Also tweaks the readme example a bit to clarify how to get the selected files.

Testing Instructions

1. npm run storybook:dev
2. See the stories for FormFileUpload

Types of changes

Storybook/docs only.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• I've tested my changes with keyboard and screen readers.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).
• I've updated related schemas if appropriate.

[github-actions]

Size Change: 0 B

Total Size: 1.15 MB

ℹ️ View Unchanged

Filename	Size
build/a11y/index.min.js	993 B
build/admin-manifest/index.min.js	1.13 kB
build/annotations/index.min.js	2.77 kB
build/api-fetch/index.min.js	2.25 kB
build/autop/index.min.js	2.15 kB
build/blob/index.min.js	487 B
build/block-directory/index.min.js	6.31 kB
build/block-directory/style-rtl.css	1.01 kB
build/block-directory/style.css	1.01 kB
build/block-editor/default-editor-styles-rtl.css	378 B
build/block-editor/default-editor-styles.css	378 B
build/block-editor/index.min.js	142 kB
build/block-editor/style-rtl.css	14.8 kB
build/block-editor/style.css	14.8 kB
build/block-library/blocks/archives/editor-rtl.css	61 B
build/block-library/blocks/archives/editor.css	60 B
build/block-library/blocks/archives/style-rtl.css	65 B
build/block-library/blocks/archives/style.css	65 B
build/block-library/blocks/audio/editor-rtl.css	150 B
build/block-library/blocks/audio/editor.css	150 B
build/block-library/blocks/audio/style-rtl.css	111 B
build/block-library/blocks/audio/style.css	111 B
build/block-library/blocks/audio/theme-rtl.css	125 B
build/block-library/blocks/audio/theme.css	125 B
build/block-library/blocks/block/editor-rtl.css	161 B
build/block-library/blocks/block/editor.css	161 B
build/block-library/blocks/button/editor-rtl.css	470 B
build/block-library/blocks/button/editor.css	470 B
build/block-library/blocks/button/style-rtl.css	560 B
build/block-library/blocks/button/style.css	560 B
build/block-library/blocks/buttons/editor-rtl.css	292 B
build/block-library/blocks/buttons/editor.css	292 B
build/block-library/blocks/buttons/style-rtl.css	275 B
build/block-library/blocks/buttons/style.css	275 B
build/block-library/blocks/calendar/style-rtl.css	207 B
build/block-library/blocks/calendar/style.css	207 B
build/block-library/blocks/categories/editor-rtl.css	84 B
build/block-library/blocks/categories/editor.css	83 B
build/block-library/blocks/categories/style-rtl.css	79 B
build/block-library/blocks/categories/style.css	79 B
build/block-library/blocks/code/style-rtl.css	90 B
build/block-library/blocks/code/style.css	90 B
build/block-library/blocks/code/theme-rtl.css	131 B
build/block-library/blocks/code/theme.css	131 B
build/block-library/blocks/columns/editor-rtl.css	108 B
build/block-library/blocks/columns/editor.css	108 B
build/block-library/blocks/columns/style-rtl.css	406 B
build/block-library/blocks/columns/style.css	406 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css	125 B
build/block-library/blocks/comment-author-avatar/editor.css	125 B
build/block-library/blocks/comment-template/style-rtl.css	127 B
build/block-library/blocks/comment-template/style.css	127 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css	123 B
build/block-library/blocks/comments-pagination-numbers/editor.css	121 B
build/block-library/blocks/comments-pagination/editor-rtl.css	222 B
build/block-library/blocks/comments-pagination/editor.css	209 B
build/block-library/blocks/comments-pagination/style-rtl.css	235 B
build/block-library/blocks/comments-pagination/style.css	231 B
build/block-library/blocks/comments-query-loop/editor-rtl.css	95 B
build/block-library/blocks/comments-query-loop/editor.css	95 B
build/block-library/blocks/cover/editor-rtl.css	546 B
build/block-library/blocks/cover/editor.css	547 B
build/block-library/blocks/cover/style-rtl.css	1.55 kB
build/block-library/blocks/cover/style.css	1.55 kB
build/block-library/blocks/embed/editor-rtl.css	293 B
build/block-library/blocks/embed/editor.css	293 B
build/block-library/blocks/embed/style-rtl.css	417 B
build/block-library/blocks/embed/style.css	417 B
build/block-library/blocks/embed/theme-rtl.css	124 B
build/block-library/blocks/embed/theme.css	124 B
build/block-library/blocks/file/editor-rtl.css	300 B
build/block-library/blocks/file/editor.css	300 B
build/block-library/blocks/file/style-rtl.css	255 B
build/block-library/blocks/file/style.css	255 B
build/block-library/blocks/file/view.min.js	353 B
build/block-library/blocks/freeform/editor-rtl.css	2.44 kB
build/block-library/blocks/freeform/editor.css	2.44 kB
build/block-library/blocks/gallery/editor-rtl.css	965 B
build/block-library/blocks/gallery/editor.css	967 B
build/block-library/blocks/gallery/style-rtl.css	1.61 kB
build/block-library/blocks/gallery/style.css	1.61 kB
build/block-library/blocks/gallery/theme-rtl.css	122 B
build/block-library/blocks/gallery/theme.css	122 B
build/block-library/blocks/group/editor-rtl.css	159 B
build/block-library/blocks/group/editor.css	159 B
build/block-library/blocks/group/style-rtl.css	57 B
build/block-library/blocks/group/style.css	57 B
build/block-library/blocks/group/theme-rtl.css	78 B
build/block-library/blocks/group/theme.css	78 B
build/block-library/blocks/heading/style-rtl.css	114 B
build/block-library/blocks/heading/style.css	114 B
build/block-library/blocks/html/editor-rtl.css	332 B
build/block-library/blocks/html/editor.css	333 B
build/block-library/blocks/image/editor-rtl.css	810 B
build/block-library/blocks/image/editor.css	809 B
build/block-library/blocks/image/style-rtl.css	500 B
build/block-library/blocks/image/style.css	503 B
build/block-library/blocks/image/theme-rtl.css	124 B
build/block-library/blocks/image/theme.css	124 B
build/block-library/blocks/latest-comments/style-rtl.css	284 B
build/block-library/blocks/latest-comments/style.css	284 B
build/block-library/blocks/latest-posts/editor-rtl.css	199 B
build/block-library/blocks/latest-posts/editor.css	198 B
build/block-library/blocks/latest-posts/style-rtl.css	447 B
build/block-library/blocks/latest-posts/style.css	446 B
build/block-library/blocks/list/style-rtl.css	94 B
build/block-library/blocks/list/style.css	94 B
build/block-library/blocks/media-text/editor-rtl.css	266 B
build/block-library/blocks/media-text/editor.css	263 B
build/block-library/blocks/media-text/style-rtl.css	493 B
build/block-library/blocks/media-text/style.css	490 B
build/block-library/blocks/more/editor-rtl.css	431 B
build/block-library/blocks/more/editor.css	431 B
build/block-library/blocks/navigation-link/editor-rtl.css	649 B
build/block-library/blocks/navigation-link/editor.css	650 B
build/block-library/blocks/navigation-link/style-rtl.css	94 B
build/block-library/blocks/navigation-link/style.css	94 B
build/block-library/blocks/navigation-submenu/editor-rtl.css	299 B
build/block-library/blocks/navigation-submenu/editor.css	299 B
build/block-library/blocks/navigation-submenu/view.min.js	375 B
build/block-library/blocks/navigation/editor-rtl.css	1.98 kB
build/block-library/blocks/navigation/editor.css	1.99 kB
build/block-library/blocks/navigation/style-rtl.css	1.89 kB
build/block-library/blocks/navigation/style.css	1.88 kB
build/block-library/blocks/navigation/view.min.js	2.85 kB
build/block-library/blocks/nextpage/editor-rtl.css	395 B
build/block-library/blocks/nextpage/editor.css	395 B
build/block-library/blocks/page-list/editor-rtl.css	401 B
build/block-library/blocks/page-list/editor.css	402 B
build/block-library/blocks/page-list/style-rtl.css	175 B
build/block-library/blocks/page-list/style.css	175 B
build/block-library/blocks/paragraph/editor-rtl.css	157 B
build/block-library/blocks/paragraph/editor.css	157 B
build/block-library/blocks/paragraph/style-rtl.css	273 B
build/block-library/blocks/paragraph/style.css	273 B
build/block-library/blocks/post-author/style-rtl.css	175 B
build/block-library/blocks/post-author/style.css	176 B
build/block-library/blocks/post-comments-form/style-rtl.css	446 B
build/block-library/blocks/post-comments-form/style.css	446 B
build/block-library/blocks/post-comments/style-rtl.css	521 B
build/block-library/blocks/post-comments/style.css	521 B
build/block-library/blocks/post-excerpt/editor-rtl.css	73 B
build/block-library/blocks/post-excerpt/editor.css	73 B
build/block-library/blocks/post-excerpt/style-rtl.css	69 B
build/block-library/blocks/post-excerpt/style.css	69 B
build/block-library/blocks/post-featured-image/editor-rtl.css	721 B
build/block-library/blocks/post-featured-image/editor.css	721 B
build/block-library/blocks/post-featured-image/style-rtl.css	153 B
build/block-library/blocks/post-featured-image/style.css	153 B
build/block-library/blocks/post-template/editor-rtl.css	99 B
build/block-library/blocks/post-template/editor.css	98 B
build/block-library/blocks/post-template/style-rtl.css	323 B
build/block-library/blocks/post-template/style.css	323 B
build/block-library/blocks/post-terms/style-rtl.css	73 B
build/block-library/blocks/post-terms/style.css	73 B
build/block-library/blocks/post-title/style-rtl.css	80 B
build/block-library/blocks/post-title/style.css	80 B
build/block-library/blocks/preformatted/style-rtl.css	103 B
build/block-library/blocks/preformatted/style.css	103 B
build/block-library/blocks/pullquote/editor-rtl.css	198 B
build/block-library/blocks/pullquote/editor.css	198 B
build/block-library/blocks/pullquote/style-rtl.css	389 B
build/block-library/blocks/pullquote/style.css	388 B
build/block-library/blocks/pullquote/theme-rtl.css	167 B
build/block-library/blocks/pullquote/theme.css	167 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css	122 B
build/block-library/blocks/query-pagination-numbers/editor.css	121 B
build/block-library/blocks/query-pagination/editor-rtl.css	221 B
build/block-library/blocks/query-pagination/editor.css	211 B
build/block-library/blocks/query-pagination/style-rtl.css	234 B
build/block-library/blocks/query-pagination/style.css	231 B
build/block-library/blocks/query/editor-rtl.css	131 B
build/block-library/blocks/query/editor.css	132 B
build/block-library/blocks/quote/style-rtl.css	201 B
build/block-library/blocks/quote/style.css	201 B
build/block-library/blocks/quote/theme-rtl.css	223 B
build/block-library/blocks/quote/theme.css	226 B
build/block-library/blocks/read-more/style-rtl.css	132 B
build/block-library/blocks/read-more/style.css	132 B
build/block-library/blocks/rss/editor-rtl.css	202 B
build/block-library/blocks/rss/editor.css	204 B
build/block-library/blocks/rss/style-rtl.css	289 B
build/block-library/blocks/rss/style.css	288 B
build/block-library/blocks/search/editor-rtl.css	165 B
build/block-library/blocks/search/editor.css	165 B
build/block-library/blocks/search/style-rtl.css	397 B
build/block-library/blocks/search/style.css	398 B
build/block-library/blocks/search/theme-rtl.css	64 B
build/block-library/blocks/search/theme.css	64 B
build/block-library/blocks/separator/editor-rtl.css	99 B
build/block-library/blocks/separator/editor.css	99 B
build/block-library/blocks/separator/style-rtl.css	233 B
build/block-library/blocks/separator/style.css	233 B
build/block-library/blocks/separator/theme-rtl.css	172 B
build/block-library/blocks/separator/theme.css	172 B
build/block-library/blocks/shortcode/editor-rtl.css	474 B
build/block-library/blocks/shortcode/editor.css	474 B
build/block-library/blocks/site-logo/editor-rtl.css	744 B
build/block-library/blocks/site-logo/editor.css	744 B
build/block-library/blocks/site-logo/style-rtl.css	181 B
build/block-library/blocks/site-logo/style.css	181 B
build/block-library/blocks/site-tagline/editor-rtl.css	86 B
build/block-library/blocks/site-tagline/editor.css	86 B
build/block-library/blocks/site-title/editor-rtl.css	84 B
build/block-library/blocks/site-title/editor.css	84 B
build/block-library/blocks/social-link/editor-rtl.css	177 B
build/block-library/blocks/social-link/editor.css	177 B
build/block-library/blocks/social-links/editor-rtl.css	674 B
build/block-library/blocks/social-links/editor.css	673 B
build/block-library/blocks/social-links/style-rtl.css	1.37 kB
build/block-library/blocks/social-links/style.css	1.36 kB
build/block-library/blocks/spacer/editor-rtl.css	332 B
build/block-library/blocks/spacer/editor.css	332 B
build/block-library/blocks/spacer/style-rtl.css	48 B
build/block-library/blocks/spacer/style.css	48 B
build/block-library/blocks/table/editor-rtl.css	471 B
build/block-library/blocks/table/editor.css	472 B
build/block-library/blocks/table/style-rtl.css	481 B
build/block-library/blocks/table/style.css	481 B
build/block-library/blocks/table/theme-rtl.css	188 B
build/block-library/blocks/table/theme.css	188 B
build/block-library/blocks/tag-cloud/style-rtl.css	214 B
build/block-library/blocks/tag-cloud/style.css	215 B
build/block-library/blocks/template-part/editor-rtl.css	560 B
build/block-library/blocks/template-part/editor.css	559 B
build/block-library/blocks/template-part/theme-rtl.css	101 B
build/block-library/blocks/template-part/theme.css	101 B
build/block-library/blocks/text-columns/editor-rtl.css	95 B
build/block-library/blocks/text-columns/editor.css	95 B
build/block-library/blocks/text-columns/style-rtl.css	166 B
build/block-library/blocks/text-columns/style.css	166 B
build/block-library/blocks/verse/style-rtl.css	87 B
build/block-library/blocks/verse/style.css	87 B
build/block-library/blocks/video/editor-rtl.css	571 B
build/block-library/blocks/video/editor.css	572 B
build/block-library/blocks/video/style-rtl.css	173 B
build/block-library/blocks/video/style.css	173 B
build/block-library/blocks/video/theme-rtl.css	124 B
build/block-library/blocks/video/theme.css	124 B
build/block-library/common-rtl.css	921 B
build/block-library/common.css	919 B
build/block-library/editor-rtl.css	10.1 kB
build/block-library/editor.css	10.1 kB
build/block-library/index.min.js	168 kB
build/block-library/reset-rtl.css	474 B
build/block-library/reset.css	474 B
build/block-library/style-rtl.css	11.3 kB
build/block-library/style.css	11.3 kB
build/block-library/theme-rtl.css	672 B
build/block-library/theme.css	676 B
build/block-serialization-default-parser/index.min.js	1.12 kB
build/block-serialization-spec-parser/index.min.js	2.83 kB
build/blocks/index.min.js	46.4 kB
build/components/index.min.js	215 kB
build/components/style-rtl.css	15.5 kB
build/components/style.css	15.5 kB
build/compose/index.min.js	11.2 kB
build/core-data/index.min.js	13.4 kB
build/customize-widgets/index.min.js	11.4 kB
build/customize-widgets/style-rtl.css	1.5 kB
build/customize-widgets/style.css	1.49 kB
build/data-controls/index.min.js	663 B
build/data/index.min.js	7.47 kB
build/date/index.min.js	31.9 kB
build/deprecated/index.min.js	518 B
build/dom-ready/index.min.js	336 B
build/dom/index.min.js	4.53 kB
build/edit-navigation/index.min.js	16.2 kB
build/edit-navigation/style-rtl.css	3.76 kB
build/edit-navigation/style.css	3.76 kB
build/edit-post/classic-rtl.css	546 B
build/edit-post/classic.css	547 B
build/edit-post/index.min.js	30 kB
build/edit-post/style-rtl.css	7.17 kB
build/edit-post/style.css	7.16 kB
build/edit-site/index.min.js	41.9 kB
build/edit-site/style-rtl.css	7.22 kB
build/edit-site/style.css	7.21 kB
build/edit-widgets/index.min.js	16.7 kB
build/edit-widgets/style-rtl.css	4.17 kB
build/edit-widgets/style.css	4.17 kB
build/editor/index.min.js	38.5 kB
build/editor/style-rtl.css	3.71 kB
build/editor/style.css	3.71 kB
build/element/index.min.js	3.32 kB
build/escape-html/index.min.js	548 B
build/format-library/index.min.js	6.62 kB
build/format-library/style-rtl.css	571 B
build/format-library/style.css	571 B
build/hooks/index.min.js	1.66 kB
build/html-entities/index.min.js	454 B
build/i18n/index.min.js	3.79 kB
build/is-shallow-equal/index.min.js	535 B
build/keyboard-shortcuts/index.min.js	1.83 kB
build/keycodes/index.min.js	1.41 kB
build/list-reusable-blocks/index.min.js	1.75 kB
build/list-reusable-blocks/style-rtl.css	838 B
build/list-reusable-blocks/style.css	838 B
build/media-utils/index.min.js	2.94 kB
build/notices/index.min.js	957 B
build/nux/index.min.js	2.12 kB
build/nux/style-rtl.css	747 B
build/nux/style.css	743 B
build/plugins/index.min.js	1.98 kB
build/primitives/index.min.js	949 B
build/priority-queue/index.min.js	611 B
build/react-i18n/index.min.js	704 B
build/react-refresh-entry/index.min.js	8.44 kB
build/react-refresh-runtime/index.min.js	7.31 kB
build/redux-routine/index.min.js	2.69 kB
build/reusable-blocks/index.min.js	2.25 kB
build/reusable-blocks/style-rtl.css	256 B
build/reusable-blocks/style.css	256 B
build/rich-text/index.min.js	11.1 kB
build/server-side-render/index.min.js	1.61 kB
build/shortcode/index.min.js	1.52 kB
build/token-list/index.min.js	668 B
build/url/index.min.js	1.92 kB
build/viewport/index.min.js	1.08 kB
build/warning/index.min.js	280 B
build/widgets/index.min.js	7.18 kB
build/widgets/style-rtl.css	1.16 kB
build/widgets/style.css	1.16 kB
build/wordcount/index.min.js	1.07 kB

_{compressed-size-action}

[ciampo]

LGTM 🚀

I also noticed that the system dialog takes a very long time to show after clicking the button, is that something that you can reproduce too?

file-upload-slow.mp4

[mirka]

I also noticed that the system dialog takes a very long time to show after clicking the button, is that something that you can reproduce too?

Yeah same, except I find it to be really inconsistent. Most of the time, the first click on the button is super slow but the subsequent clicks are fast. The same thing happens with the examples on MDN. There seems to have been a regression in the past, so likely a browser issue again?