Gestire i caricamenti di file front-end, considerando la sicurezza e la facilità d'uso

Sto cercando di adattare un plug-in simile a un forum esistente che non ha possibilità di allegare file multimediali.

Il plug-in funziona come un tipo di post personalizzato, quindi sarebbe "semplice" come allegare un'immagine a un post.

Mi preoccupo solo di allegare immagini piuttosto che qualsiasi tipo di file, ma il plugin lo usa wp_editore come tale la soluzione dovrebbe in qualche modo integrarsi con quella. Non mi preoccupo troppo della creazione di un pulsante tinyMCE, purché la soluzione sia in grado di inserire una miniatura dell'immagine nell'area di testo tinyMCE.

Nota che mi riferisco al front-end del mio sito Web piuttosto che all'area di amministrazione.

In una situazione assolutamente ideale, vorrei che si verificasse questo scenario:

• L'utente fa clic su "Poni una domanda"
• Usa inserisce i dettagli dei loro post
• L'utente fa clic su un pulsante nell'interfaccia tinyMCE che, simile a StackExchange, chiede all'utente di caricare un file.
• Il sistema quindi inserisce la miniatura della dimensione corretta nell'area di testo tinyMCE, dopo aver ridotto il file in questa dimensione della miniatura
• Facendo clic su questa immagine dovrebbe offrire la stessa funzionalità di un allegato di immagine in un post
• L'utente può quindi fare di nuovo clic per inserire una nuova immagine
• L'utente può anche eliminare l'immagine dalla textarea tinyMCE, se necessario

Tuttavia, sono felice che il pulsante tinyMCE sia periferico: se una casella di "caricamento file" è significativamente più semplice, va bene.

Mi sono imbattuto in questo link, ma sono sempre preoccupato di leggere gli articoli di WordPress su t'interwebs poiché non sono mai troppo sicuro di quanto siano sicuri, né sono un esperto di sicurezza php da qualsiasi tratto dell'immaginazione.

Grazie in anticipo,

Penso che il modo più semplice, dal momento che stai già utilizzando la wp_editorfunzione, sarà solo quello di includere i pulsanti multimediali nell'istanza WP_Editor - in questo modo avrai le funzioni native, incluso il pulsante "Inserisci nel post", incorporato gratuito.

Il modo in cui lo fai dipende ovviamente dal plugin con cui stai cercando di lavorare. Tuttavia, questo dovrebbe iniziare. Includi codice come questo in un modello di pagina per visualizzare l'editor e otterrai un editor sulla tua pagina. Includere questo in una forma ed elaborare i risultati è un altro passo non dettagliato qui.

// 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 definizione dell'ID post è probabilmente la parte critica e il modo in cui lo fai dipenderà dalla logica della tua funzionalità. Suggerirei:

• Creare una bozza automatica alla prima visita di questa pagina e salvare l'ID post restituito nella variabile $ post_id globale.
• Quindi salvando il post creato con lo stesso ID quando viene inviato il modulo.

Forse questa non è la soluzione ideale, ma vale la pena provare. Capito da Google, ma purtroppo ho dimenticato l'URL. La parte allegata è simile a quella nell'articolo di @goldenapples.

Ecco la funzione di 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 funzione 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

}

Il markup

<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>

Spero che questo aiuto