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();
}
});

Mis à jour le Par Copier coller | Dans wordpress