# You need a settings page where you want to put the upload images button (ok)

![](https://2370029328-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LWPtKFbhw0XehxVuoiZ%2Fuploads%2FSNRIWnDf8zrRICuXzNAy%2FScreenshot_1.png?alt=media\&token=bb16e08d-a206-4d60-8dd4-72bcaef00861)

```
<?php
// Start Edit
//  if you need a settings page where you want to put the upload images button
add_action( 'admin_menu', 'register_media_selector_settings_page' );
function register_media_selector_settings_page() {
	add_submenu_page( 'options-general.php', 'Media Selector', 'Media Selector', 'manage_options', 'media-selector', 'media_selector_settings_page_callback' );
}
//  this is the callback for the uploader button. You can use anywhere
function media_selector_settings_page_callback() {
	//  just for simplicity saving the data right here, but in practice you wouldn't want that.
	if ( isset( $_POST ) && isset( $_POST['media_ids'] ) ) :
		update_option( 'media_ids', $_POST['media_ids'] );
	endif;
	$media_ids_raw = get_option( 'media_ids');
	$media_ids = explode(',', $media_ids_raw);
  wp_enqueue_media();
	?>
		<form method='post'>
			<div class="form-group">
				<input id="upload_image_button" type="button" class="button" value="<?php _e( 'Upload image' ); ?>" />
        <input type='hidden' name='media_ids' id='image_attachment_id' value='<?php echo $media_ids_raw; ?>'>
        <div class='image-preview-wrapper'>
					<div id="image-preview">
						<?php if( count($media_ids) > 0 ):?>
							<ul>
							<?php foreach($media_ids as $i):?>
							<li><img src="<?php echo wp_get_attachment_thumb_url($i);?>"></li>
							<?php endforeach;?>
							</ul>
						<?php endif;?>
					</div>
				</div>
			</div>
			<div class="form-group">			
				<input type="submit" name="submit_image_selector" value="Save" class="button-primary">
			</div>
		</form>
	<?php
}
//  make sure you injected this js in the footer of the page
add_action( 'admin_footer', 'media_selector_print_scripts' );
function media_selector_print_scripts() {
  ?>
  <script type='text/javascript'>
		jQuery( document ).ready( function( $ ) {
			// Uploading files
			var file_frame;
			var wp_media_post_id = wp.media.model.settings.post.id; // Store the old id
      //  If you want the uploaded images are to attach with any post then give the post ID here
      var set_to_post_id = '1';
			var selectedIDS = $("#image_attachment_id").val().split(',');
			jQuery('#upload_image_button').on('click', function( event ){
				event.preventDefault();
				// If the media frame already exists, reopen it.
				if ( file_frame ) {
					// Set the post ID to what we want
					file_frame.uploader.uploader.param( 'post_id', set_to_post_id );
					// Open frame
					file_frame.open();
					return;
				} else {
					// Set the wp.media post id so the uploader grabs the ID we want when initialised
				  wp.media.model.settings.post.id = set_to_post_id;
				}
				// Create the media frame.
				file_frame = wp.media.frames.file_frame = wp.media({
					title: 'Select images to upload',
					button: {
						text: 'Use these images',
					},
					multiple: true	// Set to true to allow multiple files to be selected
				});
				file_frame.on('open', function(){
					var selection = file_frame.state().get('selection');
					var selected = $("#image_attachment_id").val().split(',') // the id of the image
					if (selected && selected.length > 0) {
						selected.map( function( s ) {	
							selection.add(wp.media.attachment(s));
						});
					}
				});
				// When an image is selected, run a callback.
				file_frame.on( 'select', function() {
					// We set multiple to false so only get one image from the uploader
					var selection = file_frame.state().get('selection');
					var $html = '<ul class="thumb">';
					var IDs = [];
					selection.map( function( attachment ) {		
						var attachment = attachment.toJSON();		
						console.log(attachment);

						$html += "<li><img src='" + attachment.sizes.thumbnail.url + "'></li>";
						if( IDs.indexOf(attachment.id) === -1 ){
							IDs.push(attachment.id);
						}
					});
					$html += "</ul>";
					IDs = IDs.join(',');
					$( '#image-preview' ).html($html);
					$( '#image_attachment_id' ).val( IDs );
					// Restore the main post ID
					wp.media.model.settings.post.id = wp_media_post_id;
				});
					// Finally, open the modal
					file_frame.open();
			});
			// Restore the main ID when the add media button in thge post editor page is pressed
			jQuery( 'a.add_media' ).on( 'click', function() {
				wp.media.model.settings.post.id = wp_media_post_id;
			});
		});
	</script><?php
}
// console.log(attachment);
{
	"uploading": false,
	"date": 1645502547000,
	"filename": "HHHHHJKKKKKKKKKKKKKKK.png",
	"menuOrder": 0,
	"uploadedTo": 1,
	"type": "image",
	"subtype": "png",
	"id": 11,
	"title": "HHHHHJKKKKKKKKKKKKKKK",
	"url": "http://localhost/wordpress4/wp-content/uploads/2022/02/HHHHHJKKKKKKKKKKKKKKK.png",
	"link": "http://localhost/wordpress4/hello-world/hhhhhjkkkkkkkkkkkkkkk/",
	"alt": "",
	"author": "1",
	"description": "",
	"caption": "",
	"name": "hhhhhjkkkkkkkkkkkkkkk",
	"status": "inherit",
	"modified": 1645502547000,
	"mime": "image/png",
	"icon": "http://localhost/wordpress4/wp-includes/images/media/default.png",
	"dateFormatted": "February 22, 2022",
	"nonces":
	{
		"update": "3ad96e64fc",
		"delete": "bf83fa7870",
		"edit": "8b00f2332f"
	},
	"editLink": "http://localhost/wordpress4/wp-admin/post.php?post=11&action=edit",
	"meta": false,
	"authorName": "wordpress3",
	"authorLink": "http://localhost/wordpress4/wp-admin/profile.php",
	"uploadedToTitle": "Hello world!",
	"uploadedToLink": "http://localhost/wordpress4/wp-admin/post.php?post=1&action=edit",
	"filesizeInBytes": 10644,
	"filesizeHumanReadable": "10 KB",
	"context": "",
	"height": 480,
	"width": 785,
	"orientation": "landscape",
	"sizes":
	{
		"thumbnail":
		{
			"height": 150,
			"width": 150,
			"url": "http://localhost/wordpress4/wp-content/uploads/2022/02/HHHHHJKKKKKKKKKKKKKKK-150x150.png",
			"orientation": "landscape"
		},
		"medium":
		{
			"height": 183,
			"width": 300,
			"url": "http://localhost/wordpress4/wp-content/uploads/2022/02/HHHHHJKKKKKKKKKKKKKKK-300x183.png",
			"orientation": "landscape"
		},
		"full":
		{
			"url": "http://localhost/wordpress4/wp-content/uploads/2022/02/HHHHHJKKKKKKKKKKKKKKK.png",
			"height": 480,
			"width": 785,
			"orientation": "landscape"
		}
	},
	"compat":
	{
		"item": "",
		"meta": ""
	}
}
```
