wordpress-wp.media-uploader.php

add_action('admin_init', 'create_metabox');

function create_metabox() {
  add_meta_box(
    'stock-data', //id
    'Stock Data', //title
    array($this, 'add_metabox_stock_image_data_content'), //callback
    'stock_image', //screen
    'normal', //context
    'default', //priority
    // callback_args
  );
}

public function add_metabox_stock_image_data_content() { 
		global $post;
		$svg_id = get_option('_svgid', $default);
		$lockuniscaling = get_option('_lockuniscaling');
		?>
<style>
.lbd-section{display:flex;border-bottom: 1px solid #eee;padding: 20px 0;}
.lbd-field-desc {width:20%;}
.lbd-field-desc h4, .lbd-field-desc p { margin: 0; }
.lbd-field-desc p { font-style: italic; color: #888; }
.lbd-field-content {width:80%;}
#stock_image-wrapper {background:#f1f1f1;padding:2px}
#stock_image-wrapper img.custom_media_image {max-height: 80px;width: 80px;}
#lbd_stock_image_data .lbd-field-content { display:flex }
#lbd_stock_image_data .media_button,
#lbd_stock_image_data .media_remove {margin:auto 0;}
</style>
<div id="lbd_stock_image_data">
	<div class="lbd-section">
		<div class="lbd-field-desc">
			<h4>Stock SVG</h4>
			<p>It is used on building design</p>
		</div>
		<div class="lbd-field-content">
			<input type="hidden" id="stock_image-svgid" name="stock_image-svgid" value="<?php echo $svg_id; ?>">
			<div id="stock_image-wrapper">
				<?php if ( $svg_id ) : ?>
					<?php echo wp_get_attachment_image ( $svg_id, '_svgid', false, array('class' => 'custom_media_image')); ?>
				<?php else : ?>
					<img class="custom_media_image" src="<?php echo LBD_URL ?>admin/images/placeholder.png" />
				<?php endif; ?>
			</div>
			<input type="button" class="button media_button" value="<?php _e( 'Add SVG', 'lbd' ); ?>">
			<input type="button" class="button media_remove" value="<?php _e( 'Remove SVG', 'lbd' ); ?>">
		</div>
	</div>
	<div class="lbd-section">
		<div class="lbd-field-desc">
			<h4>lockUniScaling</h4>
		</div>
		<div class="lbd-field-content">
			<input type="checkbox" name="stock_image-lockuniscaling" value="YES" <?php echo (isset($lockuniscaling) && !empty($lockuniscaling))?'checked':''; ?> >
		</div>
	</div>
</div>
		<?php 
	}
	public function add_upload_script() {
		global $current_screen;
		$post_type = $current_screen->post_type;
		if($post_type == 'stock_image'):
// wp_enqueue_script( 'jquery-blockui' );
			?>
<script>
	(function($){
		$(document).ready( function($) {
			var insertImage = wp.media.controller.Library.extend({
				defaults :  _.defaults({
					id: 'insert-image',
					title: 'Select your SVG',
					allowLocalEdits: true,
					displaySettings: true,
					displayUserSettings: true,
					multiple : false,
					type : 'image/svg+xml'//audio, video, application/pdf, ... etc
				}, wp.media.controller.Library.prototype.defaults )
			});

			//Setup media frame
			var media = wp.media({
				button : { text : 'Select' },
				state : 'insert-image',
				states : [
					new insertImage()
				]
			});
			// var media = wp.media({
			// 	title: "Select your SVG",
			// 	multiple: false,
			// 	library: {
			// 		type: ['image/svg+xml']
			// 	}
			// });

			media.on('select', function () {
				var selection = media.state().get('selection').first();
				if (selection) {
					var attachment = selection.toJSON();
					$('#stock_image-svgid').val(attachment.id);
					// $('#stock_image-wrapper').html('');
					$('#stock_image-wrapper .custom_media_image').attr('src',attachment.url).css('display','block');
				}
			});
			$('body').on('click', '.media_button.button', function(e) {
				media.open();
				return false;
			});
			
			$('body').on('click','.media_remove', function(){
				$('#stock_image-svgid').val('');
				$('#stock_image-wrapper .custom_media_image').attr('src','<?php echo LBD_URL.'/admin/images/placeholder.png'; ?>').css('display','block');
			});

			// $(document).ajaxSuccess(function(e, request, settings){
			// 	if(settings.data)
			// 	var object = JSON.parse('{"' + decodeURI(settings.data).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}')
			// 	if(object.action === 'add-tag' && object.screen === 'edit-stock_image' && object.taxonomy === 'stock_image'){
			// 		$('.media_remove').click();
			// 	}
			// });
		});
	})(jQuery);
</script>
			<?php
		endif;
	}