Support Drag and Drop Upload (#6)

* fix typescript error * support drag and drop upload * fix eslint * use @wordpress/notices actions instead of withNotice
t-hamano · Nov 14, 2023 · 2444e01 · 2444e01
1 parent f0f442a
commit 2444e01
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 10 deletions.
diff --git a/src/source-editor.tsx b/src/source-editor.tsx
@@ -1,10 +1,13 @@
 /**
  * WordPress dependencies
  */
+import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import {
 	Button,
+	DropZone,
 	RangeControl,
+	Spinner,
 	SelectControl,
 	// @ts-ignore: has no exported member
 	__experimentalHStack as HStack,
@@ -13,16 +16,19 @@ import {
 	// @ts-ignore: has no exported member
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components';
+
 import { MediaUpload, store as blockEditorStore } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { store as noticesStore } from '@wordpress/notices';
 import { chevronUp, chevronDown } from '@wordpress/icons';
 import { filterURLForDisplay } from '@wordpress/url';
-import type { Media, Source } from './types';
+import { isBlobURL } from '@wordpress/blob';
 
 /**
  * Internal dependencies
  */
+import type { Media, Source } from './types';
 import { DEFAULT_MEDIA_VALUE, MEDIA_TYPES, MIN_MEDIA_VALUE, MAX_MEDIA_VALUE } from './constants';
 
 type Props = {
@@ -65,14 +71,21 @@ export default function SourceEditor( {
 		},
 		[ id, isSelected ]
 	);
-	const imageSizes = useSelect(
-		( select ) =>
-			select( blockEditorStore )
-				// @ts-ignore
-				.getSettings().imageSizes,
+
+	const { mediaUpload, imageSizes } = useSelect(
+		( select ) => ( {
+			// @ts-ignore
+			imageSizes: select( blockEditorStore ).getSettings().imageSizes,
+			// @ts-ignore
+			mediaUpload: select( blockEditorStore ).getSettings().mediaUpload,
+		} ),
 		[]
 	);
 
+	const { createErrorNotice, removeAllNotices } = useDispatch( noticesStore );
+
+	const [ isLoading, setIsLoading ] = useState( false );
+
 	const imageSizeOptions = imageSizes
 		.filter( ( { slug }: { slug: string } ) => {
 			return image?.media_details?.sizes?.[ slug ]?.source_url;
@@ -134,6 +147,25 @@ export default function SourceEditor( {
 		} );
 	}
 
+	function onDropFiles( filesList: File[] ) {
+		mediaUpload( {
+			allowedTypes: [ 'image' ],
+			filesList,
+			onFileChange( [ newImage ]: Media[] ) {
+				if ( isBlobURL( newImage?.url ) ) {
+					setIsLoading( true );
+					return;
+				}
+				onSelectImage( newImage );
+				setIsLoading( false );
+			},
+			onError( message: string ) {
+				removeAllNotices();
+				createErrorNotice( message, { type: 'snackbar' } );
+			},
+		} );
+	}
+
 	return (
 		<>
 			<MediaUpload
@@ -149,6 +181,8 @@ export default function SourceEditor( {
 						>
 							{ !! id && srcset ? (
 								<img src={ srcset } alt="" />
+							) : isLoading ? (
+								<Spinner />
 							) : (
 								__( 'Set image source', 'enable-responsive-image' )
 							) }
@@ -191,6 +225,7 @@ export default function SourceEditor( {
 								</Button>
 							</HStack>
 						) }
+						<DropZone onFilesDrop={ onDropFiles } />
 					</div>
 				) }
 				value={ id }

diff --git a/src/source-list.tsx b/src/source-list.tsx
@@ -83,8 +83,8 @@ export default function ImageList( props: BlockEditProps< BlockAttributes > ) {
 											sources.length === 1 && ! sources[ 0 ].id && ! sources[ 0 ].srcset
 										}
 										source={ source }
-										onChangeOrder={ ( direction ) => onChangeOrder( direction, index ) }
-										onChange={ ( newSource ) => onChange( newSource, index ) }
+										onChangeOrder={ ( direction: number ) => onChangeOrder( direction, index ) }
+										onChange={ ( newSource: Source ) => onChange( newSource, index ) }
 										onRemove={ () => onRemoveSource( index ) }
 									/>
 									{ index < sources.length - 1 && <hr /> }
@@ -112,7 +112,7 @@ export default function ImageList( props: BlockEditProps< BlockAttributes > ) {
 							disableMoveUp={ true }
 							disableMoveDown={ true }
 							disableActions={ true }
-							onChange={ ( newSource ) => onChange( newSource, 0 ) }
+							onChange={ ( newSource: Source ) => onChange( newSource, 0 ) }
 							onRemove={ () => onRemoveSource( 0 ) }
 						/>
 					) }