Custom Image Upload in WordPress

WordPress has lots of functionality to expend it according to your needs. We are going to talk about Add Media button. When we are creating any post/pages in WordPress, there is a button on the left side with the name Add Media which is used to add media files to your post/page.

Default Add Media Button


This Add Media button trigger to the lightbox to upload image/video etc. This is a built-in functionality of WordPress.

Adding Custom Image Upload

If you want to use this built-in functionality to your custom code, then you have to add the wp_enqueue_media() function on wp_enqueue_scripts hook.

add_action( 'wp_enqueue_scripts', 'enqueue_scripts_trigger' );
function enqueue_scripts_trigger() {
    wp_enqueue_media();
    wp_enqueue_script( 'my_custom_js', 'YOUR_JS_FILE_PATH', array( 'jquery' ), '1.0', true );
}

You can check the more details about wp_enqueue_script() on its documentation page. We are going to implement similar to the below image.

Custom Image Upload Preview

We need 3 things to build something like the above image. First a Button, that indicates user to click on it to upload the image. Second, we have grab the attachment id, so that we use that attachment id to display the upload image. Final and last we have to display the preview of the uploaded image. Add the given HTML on your page.

<input type="button" value="Upload Image" class="button-primary" id="upload_image"/>
<input type="hidden" name="attachment_id" class="wp_attachment_id" value="" /> </br>
<img src="" class="image" style="display:none;margin-top:10px;"/>

Now open your custom js file that you have attached with wp_enqueue_script() function and paste the code like below.

(function( $ ) {
	'use strict';

	$(function() {
		
		$('#upload_image').click(open_custom_media_window);

		function open_custom_media_window() {
			if (this.window === undefined) {
				this.window = wp.media({
					title: 'Insert Image',
					library: {type: 'image'},
					multiple: false,
					button: {text: 'Insert Image'}
				});

				var self = this;
				this.window.on('select', function() {
					var response = self.window.state().get('selection').first().toJSON();

					$('.wp_attachment_id').val(response.id);
					$('.image').attr('src', response.sizes.thumbnail.url);
                                        $('.image').show();
				});
			}

			this.window.open();
			return false;
		}
	});
})( jQuery );

We have added a function on button click event. This function will open the image uploader with help of wp.media(). And once you click the button Insert Image from the image uploader, our select event will be trigger and store the response in response variable in JSON format. With the help of response variable, we will display the preview and attachment id in the HTML.