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

admin管理员组

文章数量:1191336

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})
    };

本文标签： mediaSet a minimum and maximum limit of images to select in the MediaUpload component for Block