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

Question

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:

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

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


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