Ajouter un téléchargeur intégré à la page d'option du plug-in
J'aimerais implémenter un inline file uploader vers la page d'option de mon plugin, tel qu'introduit dans la nouvelle vue de grille de média de la médiathèque WP:
J'imagine que cet outil de téléchargement par glisser-déposer sur la page contient un objet JSON contenant des erreurs ou des données de pièce jointe dans JS lorsqu'il est utilisé.
Autant que je sache, il existe une classe wp.media.view.UploaderInline dans wp-includes/js/media-views.js mais je ne sais pas comment la mettre en œuvre en combinaison avec le balisage donné.
Les seules ressources que j'ai trouvées concernent l'utilisation du modal multimédia (introduit dans la v3.5) pour télécharger et ajouter des fichiers à une page. Mais avoir l’enregistreur en ligne serait bien mieux pour mon cas, car je ne veux pas que la médiathèque apparaisse dans le processus.
Est-ce que quelqu'un a déjà implémenté ceci pour me mettre sur la bonne voie?
THX
D'accord, voici ce que j'ai proposé: Il s'agit d'utiliser la bibliothèque plupload fournie avec WP.
1. Ajoutez un <div> à la page d'option de votre plugin qui deviendra plus tard la zone de glisser-déposer.
<div class="your-plugin-uploader multiple">
<input id="your-plugin-uploader-button" type="button" value="<?php esc_attr_e( 'Select Files' ); ?>" class="your-plugin-uploader-button button">
<span class="ajaxnonce" id="<?php echo wp_create_nonce( __FILE__ ); ?>"></span>
</div>
2. Enregistrez votre plugin JS et assurez-vous de définir plupload-all en tant que dépendance de votre script.
function se179618_admin_js() {
wp_register_script( 'your-plugin', WP_PLUGIN_URL . '/your-plugin/js/your-plugin.js', array( 'jquery', 'plupload-all' ) );
}
add_action( 'admin_enqueue_scripts', 'se179618_admin_js' );
3. Ecrivez quelques paramètres plupload dans la <head> de la page
function se179618_admin_head() {
$uploader_options = array(
'runtimes' => 'html5,silverlight,flash,html4',
'browse_button' => 'my-plugin-uploader-button',
'container' => 'my-plugin-uploader',
'drop_element' => 'my-plugin-uploader',
'file_data_name' => 'async-upload',
'multiple_queues' => true,
'max_file_size' => wp_max_upload_size() . 'b',
'url' => admin_url( 'admin-ajax.php' ),
'flash_swf_url' => includes_url( 'js/plupload/plupload.flash.swf' ),
'silverlight_xap_url' => includes_url( 'js/plupload/plupload.silverlight.xap' ),
'filters' => array(
array(
'title' => __( 'Allowed Files' ),
'extensions' => '*'
)
),
'multipart' => true,
'urlstream_upload' => true,
'multi_selection' => true,
'multipart_params' => array(
'_ajax_nonce' => '',
'action' => 'my-plugin-upload-action'
)
);
?>
<script type="text/javascript">
var global_uploader_options=<?php echo json_encode( $uploader_options ); ?>;
</script>
<?php
}
add_action( 'admin_head', 'se179618_admin_head' );
4. Ajoutez l'action appelée par le AJAX uploader
function se179618_ajax_action() {
// check ajax nonce
check_ajax_referer( __FILE__ );
if( current_user_can( 'upload_files' ) ) {
$response = array();
// handle file upload
$id = media_handle_upload(
'async-upload',
0,
array(
'test_form' => true,
'action' => 'my-plugin-upload-action'
)
);
// send the file' url as response
if( is_wp_error( $id ) ) {
$response['status'] = 'error';
$response['error'] = $id->get_error_messages();
} else {
$response['status'] = 'success';
$src = wp_get_attachment_image_src( $id, 'thumbnail' );
$response['attachment'] = array();
$response['attachment']['id'] = $id;
$response['attachment']['src'] = $src[0];
}
}
echo json_encode( $response );
exit;
}
add_action( 'wp_ajax_my-plugin-upload-action', 'se179618_ajax_action' );
5. Lancez l’uploader dans le JS de votre plugin
jQuery( document ).ready( function() {
if( jQuery( '.your-plugin-uploader' ).length > 0 ) {
var options = false;
var container = jQuery( '.your-plugin-uploader' );
options = JSON.parse( JSON.stringify( global_uploader_options ) );
options['multipart_params']['_ajax_nonce'] = container.find( '.ajaxnonce' ).attr( 'id' );
if( container.hasClass( 'multiple' ) ) {
options['multi_selection'] = true;
}
var uploader = new plupload.Uploader( options );
uploader.init();
// EVENTS
// init
uploader.bind( 'Init', function( up ) {
console.log( 'Init', up );
} );
// file added
uploader.bind( 'FilesAdded', function( up, files ) {
jQuery.each( files, function( i, file ) {
console.log( 'File Added', i, file );
} );
up.refresh();
up.start();
} );
// upload progress
uploader.bind( 'UploadProgress', function( up, file ) {
console.log( 'Progress', up, file )
} );
// file uploaded
uploader.bind( 'FileUploaded', function( up, file, response ) {
response = jQuery.parseJSON( response.response );
if( response['status'] == 'success' ) {
console.log( 'Success', up, file, response );
} else {
console.log( 'Error', up, file, response );
}
} );
}
} );
La première chose à faire est d'appeler wp_enqueue_media. Un endroit sûr pour cela pourrait être dans l'action admin_init avec certaines conditions autour.
add_action( 'admin_init', function() {
$screen = get_current_screen();
if ( ! $screen || 'my-admin-page-slug' !== $screen->id ) {
return;
}
wp_enqueue_media();
} );
Ensuite, dans votre code de page d’administration, vous ajouteriez du javascript intégré (ou vous le mettriez en file d'attente si vous voulez le faire proprement)
function my_admin_page_callback() {
...
?>
<a href="#" class="primary button upload">Upload</a>
<script type="text/javascript">
$('.upload.button').click(function(e) {
e.preventDefault();
var custom_uploader = wp.media({
title: 'Custom Title',
button: {
text: 'Custom Button Text'
},
multiple: false // Set this to true to allow multiple files to be selected
})
.on('select', function() {
var attachment = custom_uploader.state().get('selection').first().toJSON();
// Do something with attachment.url;
// Do something with attachment.id;
})
.open();
});
</script>
<?php
...
}
Obtenir le glisser-déposer peut s’avérer un peu difficile, mais si vous creusez un peu vous-même, vous pourrez peut-être le trouver.
Voici un exemple pour la version 4.7 et supérieure de wp. La tâche est simple. Ce code est directement cloné script extrait du par défaut Wordpress Ajouter une nouvelle page (media-new.php).
function my_admin_enqueue_scripts() {
wp_enqueue_script('plupload-handlers');
}
add_action('admin_enqueue_scripts', 'my_admin_enqueue_scripts');
Ajoutez ce code HTML sur votre page d’options. Assurez-vous de garder ce en dehors de votre propre élément <form>. Pour que les variables restent hors de portée globale, il est recommandé d’envelopper la sortie HTML dans une fonction. Cet exemple prête le conteneur d'avis de l'administrateur supérieur pour afficher la zone sur chaque page d'administration ... afin que vous puissiez le tester sans page d'option.
function my_upload_new_media_html(){
/* everything is copied from media-new.php */
/* translated, and old browser option is there as well */
$title = __('Upload New Media');
$post_id = 0;
if(isset($_REQUEST['post_id'])){
$post_id = absint($_REQUEST['post_id']);
if(!get_post($post_id) || !current_user_can('edit_post', $post_id)) $post_id = 0;
}
if($_POST){
if(isset($_POST['html-upload']) && !empty($_FILES)){
check_admin_referer('media-form');
// Upload File button was clicked
$upload_id = media_handle_upload('async-upload', $post_id);
if(is_wp_error($upload_id)){
wp_die($upload_id);
}
}
wp_redirect(admin_url('upload.php'));
exit;
}
$form_class = 'media-upload-form type-form validate';
if(get_user_setting('uploader') || isset( $_GET['browser-uploader']))
$form_class .= ' html-uploader';
?>
<div class="wrap">
<h1><?php echo esc_html( $title ); ?></h1>
<form enctype="multipart/form-data" method="post" action="<?php echo admin_url('media-new.php'); ?>" class="<?php echo esc_attr( $form_class ); ?>" id="file-form">
<?php media_upload_form(); ?>
<script type="text/javascript">
var post_id = <?php echo $post_id; ?>, shortform = 3;
</script>
<input type="hidden" name="post_id" id="post_id" value="<?php echo $post_id; ?>" />
<?php wp_nonce_field('media-form'); ?>
<div id="media-items" class="hide-if-no-js"></div>
</form>
</div>
<?php
}
add_action('all_admin_notices', 'my_upload_new_media_html');
Et Boom, c'est là.