Usar el Media Uploader de WordPress en tus plugins y temas

Cuando estas desarrollando un plugin o un theme, es posible que necesites que el usuario pueda subir algún archivo multimedia, es en estos casos en que usar la funcionalidad del Media Uploader de WordPress le facilitará el trabajo al usuario haciendo el envío de archivos más sencillo.

1- Formulario HTM

Necesitas un formulario para mostrar los controles, constará de: un input en donde se guardará la ruta, el botón para llamar al Media Uploader y otro botón para hacer el submit; en este último botón puedes programar para hacer algo con la ruta proporcionada con por el Media Uploader.

Usaremos el siguiente código:

<div class="wrap">
	<h1>Ejemplo Media Uploader</h1>
	<form method="post">
		<input id="image-url" type="text" name="image" />
		<input id="upload-button" type="button" class="button" value="Upload Image" />
		<input class="button" type="submit" value="Submit" />
	</form>
</div>

2- Código Javascript

Luego necesitas código javascript para interactuar con el código del formulario HTML anterior, el código que usaremos será:

jQuery(document).ready(function($){
	var mediaUploader;

	$('#upload-button').click(function(e) {
		e.preventDefault();

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

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

	  // When a file is selected, grab the URL and set it as the text field's value
	  mediaUploader.on('select', function() {
			attachment = mediaUploader.state().get('selection').first().toJSON();
			$('#image-url').val(attachment.url);
		});

	  // Open the uploader dialog
	  mediaUploader.open();
	});

});

3- Integrando el código con WordPress

Finalmente vamos a integrar todo esto en WordPress, para nuestro ejemplo agregaremos una opción de menú en donde se muestre el formulario y además registraremos un archivo .js en donde estará el código javascript. Para hacerlo crearemos un plugin simple de ejemplo:

<?php
/*
Plugin Name: Upload image example
Plugin URI: https://decodecms.com
description: Demo plugin for uploading images using media library
Version: 1.0
Author: Jhon Marreros
Author URI: https://decodecms.com
License: GPL2
*/

// Show Form, option menu media
add_action( 'admin_menu', 'register_media_selector_settings_page' );

function register_media_selector_settings_page() {
	add_submenu_page( 'upload.php', 'Media Selector', 'Media Selector', 'manage_options', 'media-selector', 'dcms_media_selector_settings_callback' );
}

function dcms_media_selector_settings_callback() {
	?>
		<div class="wrap">
			<h1>Ejemplo Media Uploader</h1>
			<form method="post">
				<input id="image-url" type="text" name="image" />
				<input id="upload-button" type="button" class="button" value="Upload Image" />
				<input class="button" type="submit" value="Submit" />
			</form>
		</div>
	<?php
}

// Enqueu script
add_action("admin_enqueue_scripts", "dcms_insert_script_upload");

function dcms_insert_script_upload(){
	wp_enqueue_media();
    wp_register_script('my_upload', plugin_dir_url( __FILE__ ).'/js/upload.js', array('jquery'), '1', true );
    wp_enqueue_script('my_upload');
}

4- Resultado final

Luego de crear el plugin, veremos que aparece una opción de menú bajo el menú Medios llamada Media Selector. Al ingresar veremos que aparece el formulario que hemos creado y desde donde se puede usar el Media Uploader.