diff --git a/packages/block-editor/src/components/media-placeholder/README.md b/packages/block-editor/src/components/media-placeholder/README.md
index 59795b5469c8cc..bde6c7598042ba 100644
--- a/packages/block-editor/src/components/media-placeholder/README.md
+++ b/packages/block-editor/src/components/media-placeholder/README.md
@@ -37,6 +37,7 @@ This property is similar to the `allowedTypes` property. The difference is the f
 
 - Type: `String`
 - Required: No
+- Platform: Web
 
 ### addToGallery
 
@@ -46,6 +47,7 @@ If false the gallery media modal opens in the edit mode where the user can edit
 - Type: `Boolean`
 - Required: No
 - Default: `false`
+- Platform: Web
 
 ### allowedTypes
 
@@ -57,6 +59,7 @@ This property is similar to the `accept` property. The difference is the format
 
 - Type: `Array`
 - Required: No
+- Platform: Web | Mobile
 
 ### className
 
@@ -64,6 +67,7 @@ Class name added to the placeholder.
 
 - Type: `String`
 - Required: No
+- Platform: Web
 
 ### icon
 
@@ -71,6 +75,7 @@ Icon to display left of the title. When passed as a `String`, the icon will be r
 
 - Type: `String|WPComponent`
 - Required: No
+- Platform: Web | Mobile
 
 ### isAppender
 
@@ -80,6 +85,7 @@ If false the default placeholder style is used.
 - Type: `Boolean`
 - Required: No
 - Default: `false`
+- Platform: Web
 
 ### labels
 
@@ -87,7 +93,7 @@ An object that can contain a `title` and `instructions` properties. These proper
 
 - Type: `Object`
 - Required: No
-
+- Platform: Web | Mobile
 
 ### multiple
 
@@ -96,6 +102,7 @@ Whether to allow multiple selection of files or not.
 - Type: `Boolean`
 - Required: No
 - Default: `false`
+- Platform: Web
 
 ### onError
 
@@ -103,6 +110,7 @@ Callback called when an upload error happens.
 
 - Type: `Function`
 - Required: No
+- Platform: Web
 
 ### onSelect
 
@@ -111,6 +119,11 @@ The call back receives an array with the new files. Each element of the collecti
 
 - Type: `Function`
 - Required: Yes
+- Platform: Web | Mobile
+
+The argument of the callback is an object containing the following properties:
+- Web: `{ url, alt, id, link, caption, sizes, media_details }`
+- Mobile: `{ id, url }`
 
 ### value
 
@@ -118,6 +131,7 @@ Media ID (or media IDs if multiple is true) to be selected by default when openi
 
 - Type: `Number|Array`
 - Required: No
+- Platform: Web
 
 
 ## Extend
diff --git a/packages/block-editor/src/components/media-placeholder/index.native.js b/packages/block-editor/src/components/media-placeholder/index.native.js
index e04361b71f3307..e224cce83c45e4 100644
--- a/packages/block-editor/src/components/media-placeholder/index.native.js
+++ b/packages/block-editor/src/components/media-placeholder/index.native.js
@@ -16,10 +16,11 @@ import { withTheme, useStyle } from '@wordpress/components';
 import styles from './styles.scss';
 
 function MediaPlaceholder( props ) {
-	const { mediaType, labels = {}, icon, onSelectURL, theme } = props;
+	const { allowedTypes = [], labels = {}, icon, onSelect, theme } = props;
 
-	const isImage = MEDIA_TYPE_IMAGE === mediaType;
-	const isVideo = MEDIA_TYPE_VIDEO === mediaType;
+	const isOneType = allowedTypes.length === 1;
+	const isImage = isOneType && allowedTypes.includes( MEDIA_TYPE_IMAGE );
+	const isVideo = isOneType && allowedTypes.includes( MEDIA_TYPE_VIDEO );
 
 	let placeholderTitle = labels.title;
 	if ( placeholderTitle === undefined ) {
@@ -52,8 +53,8 @@ function MediaPlaceholder( props ) {
 
 	return (
 		<MediaUpload
-			mediaType={ mediaType }
-			onSelectURL={ onSelectURL }
+			allowedTypes={ allowedTypes }
+			onSelect={ onSelect }
 			render={ ( { open, getMediaOptions } ) => {
 				return (
 					<TouchableWithoutFeedback
diff --git a/packages/block-editor/src/components/media-upload/README.md b/packages/block-editor/src/components/media-upload/README.md
index 6e0a67d9f187c6..afcc4f368a6f13 100644
--- a/packages/block-editor/src/components/media-upload/README.md
+++ b/packages/block-editor/src/components/media-upload/README.md
@@ -63,6 +63,7 @@ If allowedTypes is unset all mime types should be allowed.
 
 - Type: `Array`
 - Required: No
+- Platform: Web | Mobile
 
 ### multiple
 
@@ -71,6 +72,7 @@ Whether to allow multiple selections or not.
 - Type: `Boolean`
 - Required: No
 - Default: false
+- Platform: Web
 
 ### value
 
@@ -78,6 +80,7 @@ Media ID (or media IDs if multiple is true) to be selected by default when openi
 
 - Type: `Number|Array`
 - Required: No
+- Platform: Web
 
 ### onSelect
 
@@ -85,6 +88,7 @@ Callback called when the media modal is closed, the selected media are passed as
 
 - Type: `Function`
 - Required: Yes
+- Platform: Web | Mobile
 
 ### title
 
@@ -93,6 +97,7 @@ Title displayed in the media modal.
 - Type: `String`
 - Required: No
 - Default: `Select or Upload Media`
+- Platform: Web
 
 ### modalClass
 
@@ -100,7 +105,7 @@ CSS class added to the media modal frame.
 
 - Type: `String`
 - Required: No
-
+- Platform: Web
 
 ### addToGallery
 
@@ -111,6 +116,7 @@ Only applies if `gallery === true`.
 - Type: `Boolean`
 - Required: No
 - Default: `false`
+- Platform: Web
 
 ### gallery
 
@@ -119,6 +125,7 @@ If true, the component will initiate all the states required to represent a gall
 - Type: `Boolean`
 - Required: No
 - Default: `false`
+- Platform: Web
 
 ## render
 
@@ -126,6 +133,7 @@ A callback invoked to render the Button opening the media library.
 
 - Type: `Function`
 - Required: Yes
+- Platform: Web | Mobile
 
 The first argument of the callback is an object containing the following properties:
 
diff --git a/packages/block-editor/src/components/media-upload/index.native.js b/packages/block-editor/src/components/media-upload/index.native.js
index 14ed5d8dbe6236..88208d961c3d2a 100644
--- a/packages/block-editor/src/components/media-upload/index.native.js
+++ b/packages/block-editor/src/components/media-upload/index.native.js
@@ -23,16 +23,27 @@ export const MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_WORD_PRESS_LIBRARY = 'wordpress_med
 
 export const OPTION_TAKE_VIDEO = __( 'Take a Video' );
 export const OPTION_TAKE_PHOTO = __( 'Take a Photo' );
+export const OPTION_TAKE_PHOTO_OR_VIDEO = __( 'Take a Photo or Video' );
 
 export class MediaUpload extends React.Component {
+	constructor( props ) {
+		super( props );
+		this.onPickerPresent = this.onPickerPresent.bind( this );
+		this.onPickerChange = this.onPickerChange.bind( this );
+		this.onPickerSelect = this.onPickerSelect.bind( this );
+	}
 	getTakeMediaLabel() {
-		const { mediaType } = this.props;
+		const { allowedTypes = [] } = this.props;
+
+		const isOneType = allowedTypes.length === 1;
+		const isImage = isOneType && allowedTypes.includes( MEDIA_TYPE_IMAGE );
+		const isVideo = isOneType && allowedTypes.includes( MEDIA_TYPE_VIDEO );
 
-		if ( mediaType === MEDIA_TYPE_IMAGE ) {
+		if ( isImage ) {
 			return OPTION_TAKE_PHOTO;
-		} else if ( mediaType === MEDIA_TYPE_VIDEO ) {
+		} else if ( isVideo ) {
 			return OPTION_TAKE_VIDEO;
-		}
+		} return OPTION_TAKE_PHOTO_OR_VIDEO;
 	}
 
 	getMediaOptionsItems() {
@@ -44,11 +55,15 @@ export class MediaUpload extends React.Component {
 	}
 
 	getChooseFromDeviceIcon() {
-		const { mediaType } = this.props;
+		const { allowedTypes = [] } = this.props;
+
+		const isOneType = allowedTypes.length === 1;
+		const isImage = isOneType && allowedTypes.includes( MEDIA_TYPE_IMAGE );
+		const isVideo = isOneType && allowedTypes.includes( MEDIA_TYPE_VIDEO );
 
-		if ( mediaType === MEDIA_TYPE_IMAGE ) {
+		if ( isImage || ! isOneType ) {
 			return 'format-image';
-		} else if ( mediaType === MEDIA_TYPE_VIDEO ) {
+		} else if ( isVideo ) {
 			return 'format-video';
 		}
 	}
@@ -61,58 +76,44 @@ export class MediaUpload extends React.Component {
 		return 'wordpress-alt';
 	}
 
-	render() {
-		const { mediaType } = this.props;
-
-		const onMediaLibraryButtonPressed = () => {
-			requestMediaPickFromMediaLibrary( [ mediaType ], ( mediaId, mediaUrl ) => {
-				if ( mediaId ) {
-					this.props.onSelectURL( mediaId, mediaUrl );
-				}
-			} );
-		};
-
-		const onMediaUploadButtonPressed = () => {
-			requestMediaPickFromDeviceLibrary( [ mediaType ], ( mediaId, mediaUrl ) => {
-				if ( mediaId ) {
-					this.props.onSelectURL( mediaId, mediaUrl );
-				}
-			} );
-		};
-
-		const onMediaCaptureButtonPressed = () => {
-			requestMediaPickFromDeviceCamera( [ mediaType ], ( mediaId, mediaUrl ) => {
-				if ( mediaId ) {
-					this.props.onSelectURL( mediaId, mediaUrl );
-				}
-			} );
-		};
+	onPickerPresent() {
+		if ( this.picker ) {
+			this.picker.presentPicker();
+		}
+	}
 
-		const mediaOptions = this.getMediaOptionsItems();
+	onPickerSelect( requestFunction ) {
+		const { allowedTypes = [], onSelect } = this.props;
+		requestFunction( allowedTypes, ( id, url ) => {
+			if ( id ) {
+				onSelect( { id, url } );
+			}
+		} );
+	}
 
-		let picker;
+	onPickerChange( value ) {
+		if ( value === MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_CHOOSE_FROM_DEVICE ) {
+			this.onPickerSelect( requestMediaPickFromDeviceLibrary );
+		} else if ( value === MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_TAKE_MEDIA ) {
+			this.onPickerSelect( requestMediaPickFromDeviceCamera );
+		} else if ( value === MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_WORD_PRESS_LIBRARY ) {
+			this.onPickerSelect( requestMediaPickFromMediaLibrary );
+		}
+	}
 
-		const onPickerPresent = () => {
-			picker.presentPicker();
-		};
+	render() {
+		const mediaOptions = this.getMediaOptionsItems();
 
 		const getMediaOptions = () => (
 			<Picker
 				hideCancelButton={ true }
-				ref={ ( instance ) => picker = instance }
+				ref={ ( instance ) => this.picker = instance }
 				options={ mediaOptions }
-				onChange={ ( value ) => {
-					if ( value === MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_CHOOSE_FROM_DEVICE ) {
-						onMediaUploadButtonPressed();
-					} else if ( value === MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_TAKE_MEDIA ) {
-						onMediaCaptureButtonPressed();
-					} else if ( value === MEDIA_UPLOAD_BOTTOM_SHEET_VALUE_WORD_PRESS_LIBRARY ) {
-						onMediaLibraryButtonPressed();
-					}
-				} }
+				onChange={ this.onPickerChange }
 			/>
 		);
-		return this.props.render( { open: onPickerPresent, getMediaOptions } );
+
+		return this.props.render( { open: this.onPickerPresent, getMediaOptions } );
 	}
 }
 
diff --git a/packages/block-editor/src/components/media-upload/test/index.native.js b/packages/block-editor/src/components/media-upload/test/index.native.js
index 6eca7575ac408b..d1eec5a560b7b7 100644
--- a/packages/block-editor/src/components/media-upload/test/index.native.js
+++ b/packages/block-editor/src/components/media-upload/test/index.native.js
@@ -29,14 +29,14 @@ const MEDIA_ID = 123;
 describe( 'MediaUpload component', () => {
 	it( 'renders without crashing', () => {
 		const wrapper = shallow(
-			<MediaUpload render={ () => {} } />
+			<MediaUpload allowedTypes={ [] } render={ () => {} } />
 		);
 		expect( wrapper ).toBeTruthy();
 	} );
 
 	it( 'opens media options picker', () => {
 		const wrapper = shallow(
-			<MediaUpload render={ ( { open, getMediaOptions } ) => {
+			<MediaUpload allowedTypes={ [] } render={ ( { open, getMediaOptions } ) => {
 				return (
 					<TouchableWithoutFeedback onPress={ open }>
 						{ getMediaOptions() }
@@ -51,7 +51,7 @@ describe( 'MediaUpload component', () => {
 		const expectOptionForMediaType = ( mediaType, expectedOption ) => {
 			const wrapper = shallow(
 				<MediaUpload
-					mediaType={ mediaType }
+					allowedTypes={ [ mediaType ] }
 					render={ ( { open, getMediaOptions } ) => {
 						return (
 							<TouchableWithoutFeedback onPress={ open }>
@@ -72,12 +72,12 @@ describe( 'MediaUpload component', () => {
 			callback( MEDIA_ID, MEDIA_URL );
 		} );
 
-		const onSelectURL = jest.fn();
+		const onSelect = jest.fn();
 
 		const wrapper = shallow(
 			<MediaUpload
-				mediaType={ MEDIA_TYPE_VIDEO }
-				onSelectURL={ onSelectURL }
+				allowedTypes={ [ MEDIA_TYPE_VIDEO ] }
+				onSelect={ onSelect }
 				render={ ( { open, getMediaOptions } ) => {
 					return (
 						<TouchableWithoutFeedback onPress={ open }>
@@ -87,10 +87,12 @@ describe( 'MediaUpload component', () => {
 				} } />
 		);
 		wrapper.find( 'Picker' ).simulate( 'change', option );
+		const media = { id: MEDIA_ID, url: MEDIA_URL };
+
 		expect( requestFunction ).toHaveBeenCalledTimes( 1 );
 
-		expect( onSelectURL ).toHaveBeenCalledTimes( 1 );
-		expect( onSelectURL ).toHaveBeenCalledWith( MEDIA_ID, MEDIA_URL );
+		expect( onSelect ).toHaveBeenCalledTimes( 1 );
+		expect( onSelect ).toHaveBeenCalledWith( media );
 	};
 
 	it( 'can select media from device library', () => {
diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index a21d4bb72830f5..2d059b04c5ca41 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -84,9 +84,9 @@ class ImageEdit extends React.Component {
 
 		if ( attributes.id && attributes.url && ! isURL( attributes.url ) ) {
 			if ( attributes.url.indexOf( 'file:' ) === 0 ) {
-				requestMediaImport( attributes.url, ( mediaId, mediaUri ) => {
-					if ( mediaUri ) {
-						setAttributes( { url: mediaUri, id: mediaId } );
+				requestMediaImport( attributes.url, ( id, url ) => {
+					if ( url ) {
+						setAttributes( { id, url } );
 					}
 				} );
 			}
@@ -178,9 +178,9 @@ class ImageEdit extends React.Component {
 		} );
 	}
 
-	onSelectMediaUploadOption( mediaId, mediaUrl ) {
+	onSelectMediaUploadOption( { id, url } ) {
 		const { setAttributes } = this.props;
-		setAttributes( { url: mediaUrl, id: mediaId } );
+		setAttributes( { id, url } );
 	}
 
 	onFocusCaption() {
@@ -265,8 +265,8 @@ class ImageEdit extends React.Component {
 			return (
 				<View style={ { flex: 1 } } >
 					<MediaPlaceholder
-						mediaType={ MEDIA_TYPE_IMAGE }
-						onSelectURL={ this.onSelectMediaUploadOption }
+						allowedTypes={ [ MEDIA_TYPE_IMAGE ] }
+						onSelect={ this.onSelectMediaUploadOption }
 						icon={ this.getIcon( false ) }
 						onFocus={ this.props.onFocus }
 					/>
@@ -363,8 +363,8 @@ class ImageEdit extends React.Component {
 		);
 
 		return (
-			<MediaUpload mediaType={ MEDIA_TYPE_IMAGE }
-				onSelectURL={ this.onSelectMediaUploadOption }
+			<MediaUpload allowedTypes={ [ MEDIA_TYPE_IMAGE ] }
+				onSelect={ this.onSelectMediaUploadOption }
 				render={ ( { open, getMediaOptions } ) => {
 					return getImageComponent( open, getMediaOptions );
 				} }
diff --git a/packages/block-library/src/video/edit.native.js b/packages/block-library/src/video/edit.native.js
index 9d004832d37f69..4b803ab9d97a95 100644
--- a/packages/block-library/src/video/edit.native.js
+++ b/packages/block-library/src/video/edit.native.js
@@ -136,9 +136,9 @@ class VideoEdit extends React.Component {
 		this.setState( { isUploadInProgress: false } );
 	}
 
-	onSelectMediaUploadOption( mediaId, mediaUrl ) {
+	onSelectMediaUploadOption( { id, url } ) {
 		const { setAttributes } = this.props;
-		setAttributes( { id: mediaId, src: mediaUrl } );
+		setAttributes( { id, src: url } );
 	}
 
 	onVideoContanerLayout( event ) {
@@ -165,8 +165,8 @@ class VideoEdit extends React.Component {
 		const { videoContainerHeight } = this.state;
 
 		const toolbarEditButton = (
-			<MediaUpload mediaType={ MEDIA_TYPE_VIDEO }
-				onSelectURL={ this.onSelectMediaUploadOption }
+			<MediaUpload allowedTypes={ [ MEDIA_TYPE_VIDEO ] }
+				onSelect={ this.onSelectMediaUploadOption }
 				render={ ( { open, getMediaOptions } ) => {
 					return (
 						<Toolbar>
@@ -186,8 +186,8 @@ class VideoEdit extends React.Component {
 			return (
 				<View style={ { flex: 1 } } >
 					<MediaPlaceholder
-						mediaType={ MEDIA_TYPE_VIDEO }
-						onSelectURL={ this.onSelectMediaUploadOption }
+						allowedTypes={ [ MEDIA_TYPE_VIDEO ] }
+						onSelect={ this.onSelectMediaUploadOption }
 						icon={ this.getIcon( false, true ) }
 						onFocus={ this.props.onFocus }
 					/>