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', 'namespace') : __('Upload Images', 'namespace') }
</Button>
);
} }
/>
/* Handler function */
function onSelectSliders(media){
let newmedia = media.length > 5 ? media.slice(0, 5) : media;
setAttributes({ sliderimages: newmedia})
};
MediaUpload
specifically. E.g. truncating the list and only saving the first 5, then highlighting the rest in red with a warningsliderimages
variable still exists if you don't show that component. Also what aboutonSelectSliders
? And why is your button wrapped in<>
if it's the only component?