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>
)
}
Related Posts:
- How to include code only on specific pages?
- Why is the unrendered widget number `__i__` showing up in the JavaScript but not in the HTML?
- How to Reload the Dashboard After Clicking Update in Quick-Edit?
- Ajax call doesn’t work in frontend but it’s working in backend (when I’m logged in)
- White text on white background in TinyMCE when wp_editor is called in WP 3.9
- What’s the best plugin for allowing javascript in a post or page? [closed]
- Is it possible to filter the wp_footer() scripts, read the content, and insert them inline?
- How can I make the “Preview Post” button save and preview in the same window?
- Disable / Deregister all JS from all plugins
- Has anyone used require.js for handling plugin scripts?
- Passing RichText attributes to function onChange
- javascript onload calling a function of a plugin
- JQuery not working in my plugin [closed]
- How to load plugin after page is loaded – pagespeed issues
- How to disable specific plugin in mobile version?
- Updating the Drag-To-Share eXtended share URLs?
- add image crop function like in wp customizer
- Calculate price and display on woocommerce product single page under price (simple price, variable price) [closed]
- How to edit content before post update
- wp.media javascript issue with on select
- WordPress + JavaScipt + AJAX + MySQL: insert query for form
- Advanced AJAX Page Loader ignores other JS code
- accessing wp.media api from a tinymce plugin
- How to load wp_editor via AJAX
- WordPress 3.8.3. custom theme – sliders won’t load js/css files
- Using window.onload with Ubermenu
- GeoMashup plugin: how to customize cluster markers / icons? [closed]
- How can I remove the WordPress-Version (?ver=5.x) from my plugin
- Is there a loading priority for login_enqueue_scripts?
- Delay JavaScript files from loading
- “Conflict” with jQuery (or its plugins)?
- how to prevent all css and javascripts files from loading
- wordpress add_action() issue in ajax call
- Localizing methods for jQuery append prepend wrap parent
- Which plugin can do horizontal scrolling of RSS feeds in WordPress [closed]
- Pass user role to javascript code inside body
- How to get specific string/value from an array? php [closed]
- Why does my jQuery plugin show up as text in WordPress?
- Disable submit button order
- Conditional custom redirect
- Load CSS files in header of Bones theme?
- how to request a script more than once in wordpress
- How to turn off automatic operation for Nivo Slider?
- How to enqueue some javascript source once per page
- JS Plugin not executing the js correctly. Trying to make all internal links scroll smoothly
- Call javascript functions from each page
- CSS/JS files in WordPress
- Wp-minify doesn’t seem to minify my JS code
- Custom Plugin scripts from admin working in frontend
- Ajax call not working in wordpress through a plugin
- Javascript fetch on wordpress plugins not working
- Jquery POST Ajax Return null data in wordpress
- Gutenberg: Prevent links from being clickable in the block. Error: “Cannot destructure property ‘frameElement’ of ‘r’ as it is null.”
- Validating ajax search
- Cannot run script properly with my custom plugin
- Overriding inline !important CSS with Javscript code snippet with media query
- how i retreive the post content while editing it in real time however the editor is tinymce or gutenberg
- Add style to body based on url
- Performing CRUD operations on front end in wordpress
- How to add specific script to WordPress webpage that will working with user input and databases
- How to properly enqueue jQuery knob on WordPress without conflict?
- Ajax Call not Working in Plugin
- How to create a custom block in Gutenberg with multiple checkboxes?
- How to get a specific string from a url
- Does anybody know how to insert a complete jquery plugin into a wordpress elementor-page?
- JS working when used normally but not in wordpress
- Use AJAX to fetch Current Post Thumbnail for WordPress when Uploaded throughMedia Uploader Frontend
- Add external javascript to post template
- Problem with wordpress has_action() function
- Why can I not deregister my style and script on custom post type?
- AJAX update fails for public/non-admin users
- How to disable/enable PHP plugin functionality based on a TinyMCE toggle-button
- Javascript inserted from Plugin pointing to wrong location
- Conditional Fields depending on checkboxes
- Caching of combined CSS and JS fails because of losing MIME types through combining by PHP
- How to pass value from WordPress to Javascript
- Facebook Quote Plugin for Blockquote?
- Adding javascript to header of MetroMagazine theme
- show-hide based on select option jquery wordpress
- Speed issues because of CSS & JavaScript
- Having trouble going from Jfiddle to implementing in WordPress :(
- Javascript in plugin not working
- Jetpack Comments Change Placeholder Text
- Media Playlist Plugin
- Adding an onchange event to a custom dropdown menu in WordPress
- Possible jquery / library conflict in plugin usage
- Plugin and javascript placement
- Why won’t the Comprehensive Google Map Plugin load?
- Plugin – including external javascript calling google maps
- get_option include in my adsense
- Expanding / Collapsing Modules in WordPress Panel
- Element works, but not on wordpress site [duplicate]
- how woocommerce swatch color name when hovered or selected
- How to create post comparison in wordpress
- making a simple plugin
- Javascript as Jquery Function Call?
- Beginner question: Accessing js script in plugin
- Select posts from list and add them in a new list
- Sudden ERR_HTTP2_PROTOCOL_ERROR on every JS and CSS files loads
- Elementor Form : client side javascript validation