Say that I am making a Block that accepts between 2 and 5 images with the MediaUpload component as input. How would I go about that? Ideally for UI I would like the multiple and addToGallery props to both be true.

There must be a simple solution for this, given how common the use case is, but I haven't been able to find anything on the documentation, StackOverflow, or Google.

There are old clunky answers about globally filtering the image upload prefilter, but I need this to be scoped to specific blocks (and ideally a javascript solution.)

Here is my existing code if it's helpful:

                        multiple={ true }
                        gallery={ true }
                        onSelect={ (media) => onSelectSliders(media) }
                        allowedTypes={ ['image'] }
                        value={ sliderimages.length && sliderimages.map(item => item.id) }

                        render={ ({open}) => {
                            return (
                                        isPrimary={ true }
                                        onClick={ (event) => {
                                        } }
                                        { sliderimages.length > 0 ? __('Edit Images', 'namespace') : __('Upload Images', 'namespace') }
                        } }

/* Handler function */
    function onSelectSliders(media){
        let newmedia = media.length > 5 ? media.slice(0, 5) : media;
        setAttributes({ sliderimages: newmedia})
  • keep in mind that somebody could select 6 or 7 images in finder/explorer then drag and drop them on to the media upload component, and you would still need to handle that situation, so you need to be prepared for more images being handled, even if you don't intend to have more than 5 and have already figured out a solution for MediaUpload specifically. E.g. truncating the list and only saving the first 5, then highlighting the rest in red with a warning
    – Tom J Nowell
    Aug 26, 2022 at 15:11
  • Likewise you don't have to show the media upload component all the time, and it is just a piece of UI, your sliderimages variable still exists if you don't show that component. Also what about onSelectSliders? And why is your button wrapped in <> if it's the only component?
    – Tom J Nowell
    Aug 26, 2022 at 15:12
  • @TomJNowell - yes that's worth mentioning. The onSelect function slices past the upper bound but nothing else. I will be a little surprised if there isn't an official api for handling this. The fragment isn't related to this question at all but I'll edit out if it's distracting.
    – Ben Toth
    Aug 26, 2022 at 17:14


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.