plugins - How use wp media upload liberary in react components?

admin管理员组

文章数量:1279083

i'm using create-react-app to write a react plugin for wordpress. I want to add a button in plugin admin settings page for upload a image. I follow this doc but nothing is rendered.

my code:

...
import { Button } from '@wordpress/components';
import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';

const ALLOWED_MEDIA_TYPES = [ 'image' ];

const MyMediaUploader = () => {
    return (
        <MediaUploadCheck>
            <MediaUpload
                onSelect={ ( media ) => console.log( 'selected ' + media.length ) }
                allowedTypes={ ALLOWED_MEDIA_TYPES }
                value=""
                render={ ( { open } ) => (
                    <Button onClick={ open }>
                        Open Media Library
                    </Button>
                ) }
            />
        </MediaUploadCheck>
    );
}

export default function settingsPage(){
    return(
        <MyMediaUploader/> 
    )
}

i'm using create-react-app to write a react plugin for wordpress. I want to add a button in plugin admin settings page for upload a image. I follow this doc but nothing is rendered.

https://github/WordPress/gutenberg/tree/master/packages/block-editor/src/components/media-upload

my code:

...
import { Button } from '@wordpress/components';
import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';

const ALLOWED_MEDIA_TYPES = [ 'image' ];

const MyMediaUploader = () => {
    return (
        <MediaUploadCheck>
            <MediaUpload
                onSelect={ ( media ) => console.log( 'selected ' + media.length ) }
                allowedTypes={ ALLOWED_MEDIA_TYPES }
                value=""
                render={ ( { open } ) => (
                    <Button onClick={ open }>
                        Open Media Library
                    </Button>
                ) }
            />
        </MediaUploadCheck>
    );
}

export default function settingsPage(){
    return(
        <MyMediaUploader/> 
    )
}

• plugins
• javascript

Share Improve this question asked Jun 4, 2020 at 10:17 Mahdi AkramiMahdi Akrami 24822 silver badges99 bronze badges 4

• Are there any errors in your dev console? Note that you should be wary of including the WP Components in your bundle as it might clash with those loaded by WP itself, or have duplication issues, WP Scripts will handle the WP dependencies for you so look at that. Also note that right at the top of the linked document it says that by default it renders nothing – Tom J Nowell ♦ Commented Jun 4, 2020 at 10:47
• Are you sure it isn't the Media Placeholder component you want? github/WordPress/gutenberg/tree/master/packages/… – Tom J Nowell ♦ Commented Jun 4, 2020 at 10:48
• there is not any error in console.and how i don't include wp component and don't get import error ??! can you give me some code and explain that ? – Mahdi Akrami Commented Jun 4, 2020 at 14:14
• I'd recommend looking at how WP Scripts does it, the official docs explain it far better than I could – Tom J Nowell ♦ Commented Jun 4, 2020 at 15:11

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

here is my solution

import React, { useState, useEffect } from 'react'
import _ from 'lodash'
export default function FeaturedImage(props) {
_.noConflict()
let frame
const runUploader = (event) => {
    event.preventDefault()

    // If the media frame already exists, reopen it.
    if (frame) {
        frame.open()
        return
    }

    // Create a new media frame
    frame = wp.media({
        title: 'Select or Upload Media Of Your Chosen Persuasion',
        button: {
            text: 'Use this media',
        },
        multiple: false, // Set to true to allow multiple files to be selected
    })

    // Finally, open the modal on click
    frame.open()
}
return (
    <React.Fragment>
        <button type='button' onClick={runUploader}>
            Open Uploader
        </button>
    </React.Fragment>
)

}

本文标签： pluginsHow use wp media upload liberary in react components