Adding Wordpress "Add Media" Button to form in own Plugin - php

Question

I am trying to add my own "Add Media" Button in my own plugin form pages, I created a plugin and I have a form in add-new.php file here is the code:
<div class="wrap">
<h1><?php _e( 'Add Deal', 'webdevs' ); ?></h1>
<form action="" method="post">
<!-- I NEED TO CHANGE THIS TO SHOW "ADD MEDIA BUTTON" -->
<input id="upload_image" type="text" size="36" name="upload_image" value="" />
<input id="upload_image_button" type="button" value="Upload Image" />
<?php wp_nonce_field( 'deal-new' ); ?>
<?php submit_button( __( 'Add Deal', 'webdevs' ), 'primary', 'submit_deal' ); ?>
</form>
How to add the html code and handle it in php
please help
Thnaks

Answer 1

I have created a custom image upload with metabox, you can set below code as per your need.
What you need is to call new WP's thickbox media uploader CSS and JS on your page. you have to modify condition of adding script for plugin page.
Condition to modify if( 'post' !== $typenow ).
What it will do?
It will allow you to open wordpress media uploader and send your selected image url to textbox then you can save the url in post_meta using update_post_meta() or wherever you want to save it. you can get the url from
Supposeable variable :
$content_img = $_POST['content_img'];
Html
<p>
<label><b>Upload Content Image</b></label><br/>
<input class="upload_image" name="content_img" type="text" readonly="readonly" value="<?php echo $content_img ?>"/>
<input type="button" value="Upload" class="button button-primary button-large" onclick="upload_new_img(this)"/>
Remove
</p>
Admin functions.php
// Enqueue script in admin
function my_admin_scripts() {
# Not our screen, bail out
if( 'post.php' !== $hook )
return;
# Not our post type, bail out
global $typenow;
if( 'post' !== $typenow )
return;
wp_enqueue_media('media-upload');
wp_enqueue_media('thickbox');
wp_register_script('my-upload', get_stylesheet_directory_uri().'/js/metabox.js', array('jquery','media-upload','thickbox'));
wp_enqueue_media('my-upload');
}
// Call thickbox CSS
function my_admin_styles() {
wp_enqueue_style('thickbox');
}
add_action('admin_enqueue_scripts', 'my_admin_scripts');
add_action('admin_enqueue_scripts', 'my_admin_styles');
Custom JS metabox.js
function upload_new_img(obj)
{
var file_frame;
var img_name = jQuery(obj).closest('p').find('.upload_image');
if ( file_frame ) {
file_frame.open();
return;
}
file_frame = wp.media.frames.file_frame = wp.media(
{
title: 'Select File',
button: {
text: jQuery( this ).data( 'uploader_button_text' )
},
multiple: false
}
);
file_frame.on('select', function() {
attachment = file_frame.state().get('selection').first().toJSON();
var newwurl = attachment.url.split('/wp-content');
img_name[0].value = '/wp-content'+newwurl[1];
file_frame.close();
// jQuery('.upload_image').val(attachment.url);
});
file_frame.open();
}
function remove_image(obj) {
var img_name;
if (jQuery(obj).closest('p').find('.upload_image').length > 0) {
img_name = jQuery(obj).closest('p').find('.upload_image');
} else {
img_name = jQuery(obj).closest('td').find('.upload_image');
}
if (typeof img_name != "undefined") {
img_name.val('');
}
}