Rnmobile/upload media file

packages/block-library/src/image/edit.native.js

@@ -1,75 +1,130 @@
 /**
  * External dependencies
  */
-import { View, Image, TextInput } from 'react-native';
+import React from 'react';
+import { View, Image, TextInput, NativeEventEmitter } from 'react-native';
 import RNReactNativeGutenbergBridge from 'react-native-gutenberg-bridge';
 
+const gutenbergBridgeEvents = new NativeEventEmitter( RNReactNativeGutenbergBridge );
+
 /**
  * Internal dependencies
  */
 import { MediaPlaceholder, RichText, BlockControls } from '@wordpress/editor';
-import { Toolbar, ToolbarButton } from '@wordpress/components';
+import { Toolbar, ToolbarButton, Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-export default function ImageEdit( props ) {
-	const { attributes, isSelected, setAttributes } = props;
-	const { url, caption } = attributes;
-
-	const onUploadPress = () => {
-		// This method should present an image picker from
-		// the device.
-		//TODO: Implement upload image method.
-	};
-
-	const onMediaLibraryPress = () => {
-		RNReactNativeGutenbergBridge.onMediaLibraryPress( ( mediaUrl ) => {
-			if ( mediaUrl ) {
-				setAttributes( { url: mediaUrl } );
-			}
-		} );
-	};
-
-	if ( ! url ) {
+const mediaUploadStateUploading = 1;
+const mediaUploadStateSucceeded = 2;
+const mediaUploadStateFailed = 3;
+
+export default class ImageEdit extends React.Component {
+	constructor( props ) {
+		super( props );
+
+		this.state = {
+			progress: 0,
+		};
+
+		this.mediaUpload = this.mediaUpload.bind( this );
+		this.addMediaUploadListener = this.addMediaUploadListener.bind( this );
+		this.removeMediaUploadListener = this.removeMediaUploadListener.bind( this );
+		this.finishMediaUploading = this.finishMediaUploading.bind( this );
+	}
+
+	mediaUpload( payload ) {
+		if ( payload.state === mediaUploadStateUploading ) {
+			this.setState( { progress: payload.progress } );
+		} else if ( payload.state === mediaUploadStateSucceeded || payload.state === mediaUploadStateFailed ) {
+			this.finishMediaUploading( payload );
+		}
+	}
+
+	finishMediaUploading( payload ) {
+		const { setAttributes } = this.props;
+
+		setAttributes( { url: payload.mediaUrl, id: payload.mediaId } );
+		this.setState( { progress: payload.progress } );
+		this.removeMediaUploadListener( payload.mediaId );
+	}
+
+	addMediaUploadListener( mediaId ) {
+		gutenbergBridgeEvents.addListener( 'mediaUpload' + mediaId, this.mediaUpload );
+	}
+
+	removeMediaUploadListener( mediaId ) {
+		gutenbergBridgeEvents.removeListener( 'mediaUpload' + mediaId, this.mediaUpload );
+	}
+
+	render() {
+		const { attributes, isSelected, setAttributes } = this.props;
+		const { url, caption } = attributes;
+
+		const onMediaLibraryPress = () => {
+			RNReactNativeGutenbergBridge.onMediaLibraryPress( ( mediaUrl ) => {
+				if ( mediaUrl ) {
+					setAttributes( { url: mediaUrl } );
+				}
+			} );
+		};
+
+		if ( ! url ) {
+			const onUploadMediaPress = () => {
+				RNReactNativeGutenbergBridge.onUploadMediaPress( ( mediaId, mediaUri ) => {
+					if ( mediaUri ) {
+						this.addMediaUploadListener( mediaId );
+						setAttributes( { url: mediaUri, id: mediaId } );
+					}
+				} );
+			};
+
+			return (
+				<MediaPlaceholder
+					onUploadMediaPress={ onUploadMediaPress }
+					onMediaLibraryPress={ onMediaLibraryPress }
+				/>
+			);
+		}
+
+		const toolbarEditButton = (
+			<Toolbar>
+				<ToolbarButton
+					className="components-toolbar__control"
+					label={ __( 'Edit image' ) }
+					icon="edit"
+					onClick={ onMediaLibraryPress }
+				/>
+			</Toolbar>
+		);
+
+		const http = 'http';
+		const showSpinner = url !== undefined ? ! url.includes( http ) : false;
+		const progress = this.state.progress * 100;
+		const opacity = showSpinner ? 0.3 : 1;
+
 		return (
-			<MediaPlaceholder
-				onUploadPress={ onUploadPress }
-				onMediaLibraryPress={ onMediaLibraryPress }
-			/>
+			<View style={ { flex: 1 } }>
+				{ showSpinner && <Spinner progress={ progress } /> }
+				<BlockControls>
+					{ toolbarEditButton }
+				</BlockControls>
+				<Image
+					style={ { width: '100%', height: 200, opacity: opacity } }
+					resizeMethod="scale"
+					source={ { uri: url } }
+				/>
+				{ ( ! RichText.isEmpty( caption ) > 0 || isSelected ) && (
+					<View style={ { padding: 12, flex: 1 } }>
+						<TextInput
+							style={ { textAlign: 'center' } }
+							underlineColorAndroid="transparent"
+							value={ caption }
+							placeholder={ 'Write caption…' }
+							onChangeText={ ( newCaption ) => setAttributes( { caption: newCaption } ) }
+						/>
+					</View>
+				) }
+			</View>
 		);
 	}
-
-	const toolbarEditButton = (
-		<Toolbar>
-			<ToolbarButton
-				className="components-toolbar__control"
-				label={ __( 'Edit image' ) }
-				icon="edit"
-				onClick={ onMediaLibraryPress }
-			/>
-		</Toolbar>
-	);
-
-	return (
-		<View style={ { flex: 1 } }>
-			<BlockControls>
-				{ toolbarEditButton }
-			</BlockControls>
-			<Image
-				style={ { width: '100%', height: 200 } }
-				resizeMethod="scale"
-				source={ { uri: url } }
-			/>
-			{ ( ! RichText.isEmpty( caption ) > 0 || isSelected ) && (
-				<View style={ { padding: 12, flex: 1 } }>
-					<TextInput
-						style={ { textAlign: 'center' } }
-						underlineColorAndroid="transparent"
-						value={ caption }
-						placeholder={ 'Write caption…' }
-						onChangeText={ ( newCaption ) => setAttributes( { caption: newCaption } ) }
-					/>
-				</View>
-			) }
-		</View>
-	);
 }

packages/components/src/index.native.js

@@ -5,6 +5,7 @@ export { default as Toolbar } from './toolbar';
 export { default as ToolbarButton } from './toolbar-button';
 export { default as withSpokenMessages } from './higher-order/with-spoken-messages';
 export { default as IconButton } from './icon-button';
+export { default as Spinner } from './spinner';
 export { createSlotFill, Slot, Fill, Provider as SlotFillProvider } from './slot-fill';
 
 // Higher-Order Components

packages/components/src/spinner/index.native.js

@@ -0,0 +1,13 @@
+import { View } from 'react-native';
+
+export default function Spinner( props 	) {
+	const { progress } = props;
+
+	const width = progress + '%';
+
+	return (
+		<View style={ { flex: 1, height: 5, backgroundColor: '#a8bece' } }>
+			<View style={ { width: width, height: 5, backgroundColor: '#0087be' } } />
+		</View>
+	);
+}

packages/editor/src/components/media-placeholder/index.native.js

@@ -5,17 +5,20 @@ import { View, Text, Button } from 'react-native';
 
 import styles from './styles.scss';
 
+import { __ } from '@wordpress/i18n';
+
 function MediaPlaceholder( props ) {
 	return (
 		<View style={ styles.emptyStateContainer }>
 			<Text style={ styles.emptyStateTitle }>
-                Image
+				{ __( 'Image' ) }
 			</Text>
 			<Text style={ styles.emptyStateDescription }>
-                Select an image from your library.
+				{ __( 'Upload a new image or select a file from your library.' ) }
 			</Text>
 			<View style={ styles.emptyStateButtonsContainer }>
-				<Button title="Media Library" onPress={ props.onMediaLibraryPress } />
+				<Button title={ __( 'Upload' ) } onPress={ props.onUploadMediaPress } />
+				<Button title={ __( 'Media Library' ) } onPress={ props.onMediaLibraryPress } />
 			</View>
 		</View>
 	);

packages/editor/src/components/media-placeholder/styles.native.scss

@@ -18,6 +18,8 @@
 }
 
 .emptyStateButtonsContainer {
+	margin-top: 15;
 	flex-direction: row;
-	align-items: center;
+	justify-content: space-evenly;
+	width: 100%;
 }