WordPress editor controls

MediaUpload – Coding WordPress Gutenberg block settings

Share

Upload media to your custom Gutenberg block

You will often want an image, pdf or other files to be used in your custom block. WordPress has made this easy with the MediaUpload component that is part of the block editor (@wordpress/block-editor). Here you can see some of it’s basic properties:

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

<MediaUpload
  onSelect={(media) => {
    setAttributes({
      downloadFile: {
        title: media.title,
        filename: media.filename,
        url: media.url,
      },
    });
  }}
  multiple={false}
  render={({ open }) => (
    <>
      <button onClick={open}>
        {attributes.downloadFile === null
          ? 'Upload'
          : 'Upload new file'}
      </button>
      <p>
        {attributes.downloadFile === null
          ? ''
          : '(' + attributes.downloadFile.title + ')'}
      </p>
    </>
  )}
/>

Let’s go through the basic properties

The onSelect property is a callback to set the file object. The object contains the details of the file, such as title, filename, url etc. Save whatever you need to your attributes.

// ...
  onSelect={(media) => {
    setAttributes({
      downloadFile: {
        title: media.title,
        filename: media.filename,
        url: media.url,
      },
    });
  }}
// ...

You want to allow multiple files to be selected at once (you get an array files) or simple one?

// ...
   multiple={false}
// ...

The render property is a callback called to render the Button opening the media library. The simplest implementation should include a check if the file has been set already and render that info to the user.

If you are uploading an image – you could use this space to show a thumbnail of the selected image.

// ...
  render={({ open }) => (
    <>
      <button onClick={open}>
        {attributes.downloadFile === null
          ? 'Upload'
          : 'Upload new file'}
      </button>
      <p>
        {attributes.downloadFile === null
          ? ''
          : '(' + attributes.downloadFile.title + ')'}
      </p>
    </>
  )}
// ...

Here is a full example of how it is used inside the Inspector Controls component inside an edit function of a block:

import { InspectorControls, MediaUpload } from '@wordpress/block-editor'
import { Fragment } from '@wordpress/element'
import { PanelBody } from '@wordpress/components'

const edit = (props) => {
  const { className, attributes, setAttributes } = props
  const { show } = attributes

  return (
    <Fragment>
      <InspectorControls>
        <PanelBody title="Settings" initialOpen={false}>
          <MediaUpload
            onSelect={(media) => {
              setAttributes({
                downloadFile: {
                  title: media.title,
                  filename: media.filename,
                  url: media.url,
                  updated: ''
                }
              })
            }}
            multiple={false}
            render={({ open }) => (
              <>
                <button onClick={open}>
                  {attributes.downloadFile === null
                    ? '+ Upload file'
                    : 'x Upload new file'}
                </button>
                <p>
                  {attributes.downloadFile === null
                    ? ''
                    : '(' + attributes.downloadFile.title + ')'}
                </p>
              </>
            )}
          />
        </PanelBody>
      </InspectorControls>
      <div>My Block Content</div>
    </Fragment>
  )
}