Whilst working on an application recently I needed an easy way to add a method to upload images using the media library. I found various examples on-line but none were ideal, as they were either for specific situations like within a meta box, or using inputs with IDs that could only be used once on a page.

I wanted a solution that would enable me to add one line of code to add an input to any form or page in the admin that would generate a hidden input with an attachment Id that could be managed using the media library.

So I have developed one myself.  There is some JS, some CSS and a small PHP function. Once added to your plugin or theme, all you need to do add an input to your form is add this line of code:

pdca_write_image_upload_field($field_name,$default_val);

This then outputs a widget like this:

Clicking the “Choose Image” button opens the Media dialog box. Once an image is selected, the widget looks like this:

A hidden input, with the name $field_name is populated with the attachment ID of the attachment.

You can drop this code in anywhere in the admin and you can treat the hidden input like any other input to save and retrieve the ID of the attachment.

Here is the code:

PHP

function pdca_write_image_upload_field($field_name,$default_value=0,$field_id='',$field_class='',$container_class='') {

 $url = ($default_value) ? wp_get_attachment_thumb_url( $default_value ):"";

?>
 <div class="image_upload_container <?php echo $container_class; ?> ">

<span class="image-icon-behind dashicons dashicons-format-image"></span>

<input class="upload_image <?php echo $field_class; ?>" type="hidden" name="<?php echo $field_name; ?>" <?php if($field_id)echo " id='{$field_id}' "; ?> value="<?php if($default_value){ echo $default_value; } ?>" /> 
 <input class="upload_image_button button" type="button" value="Upload Image" />
 <button class="delete_image_button " type="button"><span class="dashicons dashicons-dismiss"></span></button>
 <img class="upload_image_preview" width="100" <?php if($url) { echo " style='display:block' src='{$url}' "; } ?> />

</div>
<?php

}

JS

jQuery(document).ready(function($){
 var custom_uploader;
 var current_uploader_receiver;
 $('.upload_image_button').click(function(e) {

e.preventDefault();

 current_uploader_receiver = jQuery(this);

//If the uploader object has already been created, reopen the dialog
 if (custom_uploader) {
 custom_uploader.open();
 return;
 }

//Extend the wp.media object
 custom_uploader = wp.media.frames.file_frame = wp.media({
 title: 'Choose Image',
 button: {
 text: 'Choose Image'
 },
 multiple: false
 });

//When a file is selected....
 custom_uploader.on('select', function() {
 attachment = custom_uploader.state().get('selection').first().toJSON();

 // set the ID of the attachment to the text field
 current_uploader_receiver.parent().find('.upload_image').val(attachment.id);

 // update the thumbnail image to show a preview of the image then show the image
 current_uploader_receiver.parent().find('.upload_image_preview').attr('src',attachment.sizes.thumbnail.url); 
 current_uploader_receiver.parent().find('.upload_image_preview').fadeIn();

 // change the button text
 current_uploader_receiver.parent().find('.upload_image_button').val("Change Image");

 });

//Open the uploader dialog
custom_uploader.open();

});
 $('.delete_image_button').click(function(e) {

 if(confirm("Are you sure you want to remove this image?")) {

 current_uploader_receiver = jQuery(this);

 current_uploader_receiver.parent().find('.upload_image_preview').fadeOut(function() {
 current_uploader_receiver.parent().find('.upload_image').val(""); // clear ID from text box
 current_uploader_receiver.parent().find('.upload_image_preview').attr('src',""); // remove thumbnail
 current_uploader_receiver.parent().find('.upload_image_button').val("Choose Image"); // reset button text

 });

 }
 });
});

CSS (optional)

.image_upload_container {
 border:1px solid #999;
 background-color:white;
 padding:1em;
 margin:1em;
 position:relative;
 width:150px;
 height:150px;
 border-radius:10px;
 float:left;
}
.image_upload_container img{

 width:150px;
 height:150px;
 position:absolute;
 z-index:2;
 border-radius:5px;
 display:none;
}
.image_upload_container .upload_image_button{
 position:absolute;
 top:130px;
 left:20px;
 z-index:3;
 background-color:rgba(255,255,255,0.7);
 border-radius:2px;
 border-color:white;
 color:black;
}
.image_upload_container .image-icon-behind {
 position:absolute;
 width:150px;
 height:150px;
 z-index:1px;
 color:#eee;
 font-size:100px;
}
.image_upload_container .delete_image_button {
 position:absolute;
 top: -2px;
 right: -7px;
 z-index:3;
 border-radius:2px;
 border-color:transparent;
 color:black;
 background:transparent;
 text-shadow:0px 0px #fff;
 cursor:pointer;
}