media – Set a minimum and maximum limit of images to select in the MediaUpload component for Block


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 && => }

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

Ben Toth 4 weeks 2022-08-26T08:31:26-05:00 0 Answers 0 views 0

Leave an answer