How to Use MediaUpload Component in Gutenberg

This is how it is going to look:

In other words, here, I’m using the MediaUpload component inside the InspectorControls component; however, you can also use it in other places, for example, in the block itself, or when developing sidebars for custom fields.

Since we’re about to add one more field to the block settings, we need to do what first? Of course, create another attribute in the block.json file.

"attributes": {
	"image" : {
		"type" : "object",
		"default" : { 
			"id" : 0 
		}
	}
}

Why have I decided to choose an object type for the attribute? The answer is pretty simple:

• If you want to only store an ID inside the attribute, then you will need to send additional REST API requests to get an image URL to display it in both the block and the block settings panel.
• On the other hand, if you want to only store an image URL, then how can we provide a value value to the MediaUpload component?

That’s why we use an object with both image ID and URL values.

The next part is to figure out what is going to be inside the InspectorControl component, and here is the code:

<MediaUpload 
	title="Select form image"
	allowedTypes={ [ 'image/jpeg', 'image/png', 'image/svg' ] }
	value={ attributes.image.id }
	onSelect={ ( image ) => setAttributes( { image : { id : image.id, url : image.url } } ) }
	render={  ( { open } ) => (
		<>
			{ ! attributes.image.id && 
			 	<Button isSecondary onClick={ open }>Select image</Button> 
			}
			{ !! attributes.image.id && attributes.image.id &&
				<>
					<img src={ attributes.image.url } onClick={ open } />
					<Button isLink isDestructive onClick={ deleteImage }>Delete image</Button>
				</>
			}
		</>
	) }
/>

The deleteImage() function simply sets the attribute value to { id : 0, url : '' }.

Also, should I remind you what both MediaUpload and Button components should be imported beforehand?

import { MediaUpload } from '@wordpress/block-editor';

import { Button } from '@wordpress/components';

One more thing, as you can see above, I allowed using SVG images in the allowedTypes parameter. But SVG files should be allowed on your WordPress site as well.

Now, that’s pretty much it. Feel free to check the source files of the block:

Sorry, but you don’t have access to the source files. Sign in or buy the course.

How to Add Multiple Images with MediaUpload in Gutenberg

Can we use the MediaUpload component to create some kind of gallery in a custom Gutenberg block? In other words, does it support selecting or uploading multiple images at the same time?

Yes, sure it does!

Everything begins with the multiple parameter of the MediaUpload component. It can have the following values:

• If you set it to true, you can select multiple images with the SHIFT or CMD/CTRL keys.
• But you can also set its value to add, which allows you to select multiple images without pressing the SHIFT or CMD keys.

For example:

<MediaUpload
	title="Select multiple images"
	allowedTypes={ [ 'image' ] }
	multiple="add"
	value={ images.map(({ id }) => id ) }
	onSelect={ ( images ) => setAttributes( { images : images } ) }
	render={ ( { open } ) => (
		<>
			{ !! images && images.length > 0 &&
				images.map( image => <img src={ image.source_url } /> )
			}
			<Button variant="secondary" onClick={ open }>Add images</Button>
		</>
	) }
/>

Please, take a look at the allowedTypes parameter here. As you can see, it is not necessary to add all the possible image extensions into the array; you can just use image.

The Gutenberg MediaUpload component can be easily used inside the plugin sidebars if you need it there. However, in that case, it should be wrapped in another component, which is MediaUploadCheck.

But what about our attribute in block.json. Yes, it should have a different type now.

"attributes": {
	"images" : {
		"type" : "array"
	}
}

Gutenberg Block Development

Misha Rudrastyh

Hey guys and welcome to my website. For more than 15 years I've been doing my best to share with you some superb WordPress guides and tips for free.

Need some developer help? Contact me

Follow me on X