Skip to content

Commit

Permalink
Image: Use the new 'useUploadMediaFromBlobURL' hook (#60208)
Browse files Browse the repository at this point in the history
* Image: Use the new 'useUploadMediaFromBlobURL' hook
* Leverage temporaryURL initial state

Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: ntsekouras <[email protected]>
Co-authored-by: t-hamano <[email protected]>
  • Loading branch information
4 people authored Mar 27, 2024
1 parent 4024041 commit ed1dafa
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 40 deletions.
51 changes: 11 additions & 40 deletions packages/block-library/src/image/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import classnames from 'classnames';
/**
* WordPress dependencies
*/
import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob';
import { isBlobURL } from '@wordpress/blob';
import { store as blocksStore } from '@wordpress/blocks';
import { Placeholder } from '@wordpress/components';
import { useDispatch, useSelect } from '@wordpress/data';
Expand All @@ -28,6 +28,7 @@ import { store as noticesStore } from '@wordpress/notices';
* Internal dependencies
*/
import { unlock } from '../lock-unlock';
import { useUploadMediaFromBlobURL } from '../utils/hooks';
import Image from './image';

/**
Expand Down Expand Up @@ -116,7 +117,9 @@ export function ImageEdit( {
align,
metadata,
} = attributes;
const [ temporaryURL, setTemporaryURL ] = useState();
const [ temporaryURL, setTemporaryURL ] = useState( () => {
return isTemporaryImage( id, url ) ? url : undefined;
} );

const altRef = useRef();
useEffect( () => {
Expand Down Expand Up @@ -267,44 +270,12 @@ export function ImageEdit( {
}
}

let isTemp = isTemporaryImage( id, url );

// Upload a temporary image on mount.
useEffect( () => {
if ( ! isTemp ) {
return;
}

const file = getBlobByURL( url );

if ( file ) {
const { mediaUpload } = getSettings();
if ( ! mediaUpload ) {
return;
}
mediaUpload( {
filesList: [ file ],
onFileChange: ( [ img ] ) => {
onSelectImage( img );
},
allowedTypes: ALLOWED_MEDIA_TYPES,
onError: ( message ) => {
isTemp = false;
onUploadError( message );
},
} );
}
}, [] );

// If an image is temporary, revoke the Blob url when it is uploaded (and is
// no longer temporary).
useEffect( () => {
if ( isTemp ) {
setTemporaryURL( url );
return;
}
revokeBlobURL( temporaryURL );
}, [ isTemp, url ] );
useUploadMediaFromBlobURL( {
url,
allowedTypes: ALLOWED_MEDIA_TYPES,
onChange: onSelectImage,
onError: onUploadError,
} );

const isExternal = isExternalImage( id, url );
const src = isExternal ? url : undefined;
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/utils/hooks.js
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ export function useUploadMediaFromBlobURL( args = {} ) {
onChange( media );
},
onError: ( message ) => {
revokeBlobURL( url );
onError( message );
},
} );
Expand Down

0 comments on commit ed1dafa

Please sign in to comment.