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.

colle esto es en respuesta a mi petición de youtube gracias !!
Me funciono perfectamente! muchas gracias!
Hay forma de configurar el tipo de archivos que puede seleccionar (filter) ejemplo solo*.pdf … pero que no afecta a todo el sistema
Gracias.
Hola, puedes revisar esta discusión: https://wordpress.stackexchange.com/questions/59621/limit-upload-by-file-type-only-for-certain-custom-post-type
Muy bien explicado, gracias.
alguna forma de subir múltiples imágenes?