Use a Map to store file block's image blob

WordPress · Mar 29, 2023 · 37d6855 · 37d6855
1 parent d05504b
commit 37d6855
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 20 deletions.
diff --git a/packages/block-library/src/file/blob-urls.js b/packages/block-library/src/file/blob-urls.js
@@ -0,0 +1 @@
+export const blobURLs = new Map();
diff --git a/packages/block-library/src/file/edit.js b/packages/block-library/src/file/edit.js
@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob';
+import { getBlobByURL, revokeBlobURL } from '@wordpress/blob';
 import {
 	__unstableGetAnimateClassName as getAnimateClassName,
 	ResizableBox,
@@ -23,7 +23,7 @@ import {
 	store as blockEditorStore,
 	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useState } from '@wordpress/element';
 import { useCopyToClipboard } from '@wordpress/compose';
 import { __, _x } from '@wordpress/i18n';
 import { file as icon } from '@wordpress/icons';
@@ -35,6 +35,7 @@ import { store as noticesStore } from '@wordpress/notices';
  */
 import FileBlockInspector from './inspector';
 import { browserSupportsPdfs } from './utils';
+import { blobURLs } from './blob-urls';
 
 export const MIN_PREVIEW_HEIGHT = 200;
 export const MAX_PREVIEW_HEIGHT = 2000;
@@ -72,6 +73,7 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 		displayPreview,
 		previewHeight,
 	} = attributes;
+
 	const { media, mediaUpload } = useSelect(
 		( select ) => ( {
 			media:
@@ -87,21 +89,34 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 	const { toggleSelection, __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
 
+	const [ isUploadingBlob, setIsUploadingBlob ] = useState( false );
+
 	useEffect( () => {
 		// Upload a file drag-and-dropped into the editor.
-		if ( isBlobURL( href ) ) {
-			const file = getBlobByURL( href );
+		if ( blobURLs.has( clientId ) ) {
+			const blobURL = blobURLs.get( clientId );
+			const file = getBlobByURL( blobURL );
+
+			setIsUploadingBlob( true );
 
 			mediaUpload( {
 				filesList: [ file ],
-				onFileChange: ( [ newMedia ] ) => onSelectFile( newMedia ),
-				onError: onUploadError,
+				onFileChange: ( [ newMedia ] ) => {
+					onSelectFile( newMedia, { isPersistent: false } );
+					setIsUploadingBlob( false );
+				},
+				onError: ( message ) => {
+					onUploadError( message );
+					setIsUploadingBlob( false );
+				},
 			} );
 
-			revokeBlobURL( href );
+			revokeBlobURL( blobURL );
+			blobURLs.delete( clientId );
 		}
 
 		if ( downloadButtonText === undefined ) {
+			__unstableMarkNextChangeAsNotPersistent();
 			changeDownloadButtonText( _x( 'Download', 'button label' ) );
 		}
 	}, [] );
@@ -114,9 +129,12 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 		}
 	}, [ href, fileId, clientId ] );
 
-	function onSelectFile( newMedia ) {
+	function onSelectFile( newMedia, { isPersistent = true } = {} ) {
 		if ( newMedia && newMedia.url ) {
 			const isPdf = newMedia.url.endsWith( '.pdf' );
+			if ( ! isPersistent ) {
+				__unstableMarkNextChangeAsNotPersistent();
+			}
 			setAttributes( {
 				href: newMedia.url,
 				fileName: newMedia.title,
@@ -178,9 +196,9 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 
 	const blockProps = useBlockProps( {
 		className: classnames(
-			isBlobURL( href ) && getAnimateClassName( { type: 'loading' } ),
+			isUploadingBlob && getAnimateClassName( { type: 'loading' } ),
 			{
-				'is-transient': isBlobURL( href ),
+				'is-transient': isUploadingBlob,
 			}
 		),
 	} );
@@ -232,7 +250,7 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 				/>
 				<ClipboardToolbarButton
 					text={ href }
-					disabled={ isBlobURL( href ) }
+					disabled={ isUploadingBlob }
 				/>
 			</BlockControls>
 			<div { ...blockProps }>

diff --git a/packages/block-library/src/file/transforms.js b/packages/block-library/src/file/transforms.js
@@ -7,6 +7,11 @@ import { select } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { getFilename } from '@wordpress/url';
 
+/**
+ * Internal dependencies
+ */
+import { blobURLs } from './blob-urls';
+
 const transforms = {
 	from: [
 		{
@@ -22,15 +27,9 @@ const transforms = {
 
 				files.forEach( ( file ) => {
 					const blobURL = createBlobURL( file );
-
-					// File will be uploaded in componentDidMount()
-					blocks.push(
-						createBlock( 'core/file', {
-							href: blobURL,
-							fileName: file.name,
-							textLinkHref: blobURL,
-						} )
-					);
+					const block = createBlock( 'core/file' );
+					blobURLs.set( block.clientId, blobURL );
+					blocks.push( block );
 				} );
 
 				return blocks;