L’uploader de wordpress dans un plugin

L’uploader de wordpress dans un plugin

Si on souhaite créer un plugin wordpress contenant l’uploader de media classique, on peut rapidement être confronté à des difficultés d’affichage. On va donc voir ici comment gérer ce cas particulier.

Afficher un uploader sur une page

voici un code js pour faire appel a l’uploader, un seul par page:

jQuery(document).ready(function($){
 
 
    var custom_uploader;
 
 
    $('#upload_image_button').click(function(e) {
 
        e.preventDefault();
 
        //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, grab the URL and set it as the text field's value
        custom_uploader.on('select', function() {
            attachment = custom_uploader.state().get('selection').first().toJSON();
            $('#upload_image').val(attachment.url);
        });
 
        //Open the uploader dialog
        custom_uploader.open();
 
    });
 
 
});

 

Avoir plusieurs uploader sur la même page.

Pour afficher plusieurs uploaders sur la même page :

jQuery(document).ready(function($){
 
 
    var custom_uploader;
 
 
    $('#upload_image_button').click(function(e) {
 
        e.preventDefault();
 
        //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, grab the URL and set it as the text field's value
        custom_uploader.on('select', function() {
            attachment = custom_uploader.state().get('selection').first().toJSON();
            $('#upload_image').val(attachment.url);
        });
 
        //Open the uploader dialog
        custom_uploader.open();
 
    });
 
 
});

Le même, sous une autre forme.

jQuery(document).ready(function() {
var clicked = null;

jQuery('.upload_image_button').click(function() {
 clicked = jQuery(this);
 formfield = jQuery(this).prev('input').attr('name');
 tb_show('', 'media-upload.php?type=image&TB_iframe=true');
 return false;
});

window.send_to_editor = function(html) {
 imgurl = jQuery('img',html).attr('src');
 clicked.prev('input').val(imgurl);
 tb_remove();
}
});

Avec ca, on est limité aux images, il faut donc modifier le code pour qu’il accepte non pas la source de l’image mais le lien href du fichier, image ou document pdf : remarquez le changement des attributs dans la fonction send_to_editor: on ne cible plus « img » et « src« , mais tout élément html qui a un attribut « href« .

jQuery(document).ready(function() {
var clicked = null;

jQuery('.upload_image_button').click(function() {
 clicked = jQuery(this);
 formfield = jQuery(this).prev('input').attr('name');
 tb_show('', 'media-upload.php?type=image&TB_iframe=true');
 return false;
});

window.send_to_editor = function(html) {
 imgurl = jQuery(html).attr('href');
 clicked.prev('input').val(imgurl);
 tb_remove();
}
});

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.