web-dev-qa-db-fra.com

Gestion des téléchargements de fichiers frontaux, en tenant compte de la sécurité et de la facilité d'utilisation

Je cherche à adapter un plug-in de type forum existant qui ne dispose d'aucune possibilité de connexion de média.

Le plugin fonctionne comme un type de message personnalisé, il serait donc "simple" de joindre une image à un message.

Je ne m'inquiète que de joindre des images plutôt que tout type de fichier, mais le plug-in utilise wp_editor et, en tant que tel, la solution devrait en quelque sorte s'intégrer à cela. Je ne suis pas trop inquiet à propos de la création d'un bouton tinyMCE, tant que la solution est capable d'insérer une vignette de l'image dans la zone de texte tinyMCE.

Veuillez noter que je fais référence au front-end de mon site web plutôt qu'à la zone d'administration.

Dans une situation absolument idéale, j'aimerais que ce scénario se produise:

  • L'utilisateur clique sur "Poser une question"
  • Utilisation entre leurs détails de poste
  • L'utilisateur clique sur un bouton de l'interface tinyMCE qui, similaire à StackExchange, demande à l'utilisateur de télécharger un fichier.
  • Le système insère ensuite la vignette correctement dimensionnée dans la zone de texte tinyMCE, après avoir regroupé le fichier dans cette taille.
  • Cliquer sur cette image devrait offrir les mêmes fonctionnalités qu’une pièce jointe à une image.
  • L'utilisateur peut ensuite cliquer à nouveau pour insérer une nouvelle image.
  • L'utilisateur peut également supprimer l'image de la zone de texte tinyMCE au besoin.

Cependant, je suis heureux que le bouton tinyMCE soit un périphérique. Si une boîte de "téléchargement de fichier" est considérablement plus facile, c'est très bien.

Je suis tombé sur ce lien mais je crains toujours de lire des articles WordPress sur t'interwebs car je ne suis jamais trop sûr de leur sécurité, je ne suis pas non plus un expert en sécurité php.

Merci d'avance,

custom-post-typessecurityuploads
8
dunc

Je pense que le moyen le plus simple, puisque vous utilisez déjà la fonction wp_editor, consiste simplement à inclure les boutons de média dans l'instance de WP_Editor - de cette façon, vous aurez les fonctions natives, y compris le bouton "Insérer dans le post", construit dans gratuitement.

La façon dont vous faites cela dépend évidemment du plugin avec lequel vous essayez de travailler. Cependant, cela devrait vous aider à démarrer. Incluez un code comme celui-ci dans un modèle de page pour afficher l'éditeur et vous obtiendrez un éditeur sur votre page. Inclure ceci dans un formulaire et traiter les résultats est une autre étape non détaillée ici.

// Define the global variable $post_id - this is used by the media uploader
// to attach uploads to a specific post (so that the uploader can see uploads
// attached to this post and not others)
global $post_id;
$post_id = $post->ID; // should be the ID of the new post created

// Now filter the list of tabs available in the media editor.
// Remove everything but the "From Computer" option.

add_filter( 'media_upload_tabs', 'wpse42068_remove_additional_tabs' );

function wpse42068_remove_additional_tabs( $_default_tabs ) {
    return array( 'type' => __('From Computer') );
}

// Now just include the WP_Editor. See
// http://codex.wordpress.org/Function_Reference/wp_editor
// for settings available
wp_editor( '', 'posteditor', array( 'media_buttons' => true ) );

La définition de l’ID de publication est probablement la partie essentielle, et la manière de procéder dépend de la logique de vos fonctionnalités. Je voudrais suggerer:

  • Créer un brouillon lors de la première visite de cette page et enregistrer l’ID de publication renvoyé dans la variable globale $ post_id.
  • Enregistrez ensuite la publication créée avec ce même identifiant lors de l'envoi du formulaire.
4
goldenapples

Peut-être que ce n'est pas votre solution idéale, mais cela en vaut la peine. Je l'ai eu en googlant mais malheureusement j'ai oublié l'adresse. La pièce jointe est similaire à celle de l'article @goldenapples.

Voici la fonction de base.

function attach_uploads($uploads,$post_id = 0){
    $files = rearrange($uploads);
    if($files[0]['name']==''){
        return false;   
    }
    foreach($files as $file){
        $upload_file = wp_handle_upload( $file, array('test_form' => false) );
        $attachment = array(
        'post_mime_type' => $upload_file['type'],
        'post_title' => preg_replace('/\.[^.]+$/', '', basename($upload_file['file'])),
        'post_content' => '',
        'post_status' => 'inherit'
    );
        $attach_id = wp_insert_attachment( $attachment, $upload_file['file'], $post_id );
        $attach_array[] = $attach_id;
        require_once(ABSPATH . 'wp-admin/includes/image.php');
        $attach_data = wp_generate_attachment_metadata( $attach_id, $upload_file['file'] );
        wp_update_attachment_metadata( $attach_id, $attach_data );
    }
    return $attach_array;
}

La fonction ajax

add_action('wp_ajax_attach_file', 'process_attach_file');
function process_attach_file() {

    // add some filter and validation on the id and the files here
    $post_id = $_POST['post_id'];
    $files = $_FILES['profile-picture'];

    // insert attachment
    $attached_files = attach_uploads($files,$post_id);

    // set the first file as post thumbnail
    if($attached_files){
        set_post_thumbnail( $post_id, $attached_files[0] ); 
    }

    // now all you have to do is set the response data

}

Le balisage

<form id="upload-form" action="<?php echo admin_url('admin-ajax.php'); ?>" method="post" class="form" enctype="multipart/form-data" >
    <label for="profile-picture">Foto Profil</label>
    <input type="file" id="profile-picture" name="profile-picture[]" size="40" multiple />
    <?php wp_nonce_field( // intention nonce); ?>
    <input name="action" value="attach_file" type="hidden">
    <input name="post_id" value="12" type="hidden">
</form>

J'espère que cette aide

6
ifdion