diff --git a/packages/js/components/changelog/dev-35714_move_file_picker_to_media_uploader b/packages/js/components/changelog/dev-35714_move_file_picker_to_media_uploader
new file mode 100644
index 00000000000..62cf00b1a9d
--- /dev/null
+++ b/packages/js/components/changelog/dev-35714_move_file_picker_to_media_uploader
@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Move file picker by clicking card into the MediaUploader component
diff --git a/packages/js/components/src/media-uploader/media-uploader.tsx b/packages/js/components/src/media-uploader/media-uploader.tsx
index c04534e50db..54bdb924821 100644
--- a/packages/js/components/src/media-uploader/media-uploader.tsx
+++ b/packages/js/components/src/media-uploader/media-uploader.tsx
@@ -2,7 +2,7 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
-import { Button, DropZone } from '@wordpress/components';
+import { Button, DropZone, FormFileUpload } from '@wordpress/components';
import { createElement } from 'react';
import {
MediaItem,
@@ -32,6 +32,7 @@ type MediaUploaderProps = {
file: File;
} ) => void;
onUpload?: ( files: MediaItem[] ) => void;
+ onFileUploadChange?: ( files: MediaItem[] ) => void;
uploadMedia?: ( options: UploadMediaOptions ) => Promise< void >;
};
@@ -43,36 +44,74 @@ export const MediaUploader = ( {
maxUploadFileSize = 10000000,
MediaUploadComponent = MediaUpload,
onError = () => null,
+ onFileUploadChange = () => null,
onUpload = () => null,
onSelect = () => null,
uploadMedia = wpUploadMedia,
}: MediaUploaderProps ) => {
+ const getFormFileUploadAcceptedFiles = () =>
+ allowedMediaTypes.map( ( type ) => `${ type }/*` );
+
return (
-
setOpen( false ) }
+ onRequestClose={ ( event ) => {
+ setOpen( false );
+ event.stopPropagation();
+ } }
>
Use the default built-in{ ' ' }
@@ -39,12 +42,13 @@ export const MockMediaUpload = ( { onSelect, render } ) => {
return (