Handhabung von Uploads von Front-End-Dateien unter Berücksichtigung der Sicherheit und Benutzerfreundlichkeit

Ich möchte ein vorhandenes Forum-ähnliches Plugin anpassen, das keine Möglichkeit zum Anhängen von Medien bietet.

Das Plugin funktioniert als benutzerdefinierter Beitragstyp. Es ist also so "einfach" wie das Anhängen eines Bildes an einen Beitrag.

Ich mache mir nur Gedanken über das Anhängen von Bildern und nicht über irgendeinen Dateityp, aber das Plugin verwendet es wp_editorund als solches sollte die Lösung in irgendeiner Weise in dieses integriert werden. Ich bin nicht übermäßig damit beschäftigt, eine tinyMCE-Schaltfläche zu erstellen, solange die Lösung in der Lage ist, eine Miniaturansicht des Bildes in den tinyMCE-Textbereich einzufügen.

Bitte beachten Sie, dass ich mich eher auf das Front-End meiner Website als auf den Admin-Bereich beziehe.

In einer absolut idealen Situation möchte ich, dass dieses Szenario auftritt:

• Benutzer klickt auf "Frage stellen"
• Verwendung gibt ihre Post-Details ein
• Der Benutzer klickt auf eine Schaltfläche auf der tinyMCE-Oberfläche, die den Benutzer ähnlich wie StackExchange auffordert, eine Datei hochzuladen.
• Das System fügt dann das Miniaturbild mit der richtigen Größe in den tinyMCE-Textbereich ein, nachdem die Datei auf diese Miniaturbildgröße gebracht wurde
• Das Klicken auf dieses Bild sollte dieselbe Funktionalität bieten wie ein Bildanhang in einem Beitrag
• Der Benutzer kann dann erneut klicken, um ein neues Bild einzufügen
• Der Benutzer kann das Bild bei Bedarf auch aus dem tinyMCE-Textbereich löschen

Ich freue mich jedoch, dass die tinyMCE-Schaltfläche peripher ist - wenn ein Feld zum Hochladen von Dateien erheblich einfacher ist, ist das in Ordnung.

Ich bin auf diesen Link gestoßen, aber ich bin immer besorgt darüber, WordPress-Artikel auf t'interwebs zu lesen, da ich nie sicher bin, wie sicher sie sind, und ich bin auch kein PHP-Sicherheitsexperte.

Danke im Voraus,

Ich denke, der einfachste Weg, da Sie die wp_editorFunktion bereits verwenden , besteht darin, nur die Medientasten in die WP_Editor-Instanz aufzunehmen. Auf diese Weise sind die nativen Funktionen, einschließlich der Schaltfläche "In Beitrag einfügen", integriert kostenlos.

Wie Sie dies tun, hängt natürlich von dem Plugin ab, mit dem Sie arbeiten möchten. Dies sollte Ihnen jedoch den Einstieg erleichtern. Fügen Sie Code wie diesen in eine Seitenvorlage ein, um den Editor anzuzeigen, und Sie erhalten einen Editor auf Ihrer Seite. Das Einfügen in ein Formular und das Verarbeiten der Ergebnisse ist ein weiterer Schritt, der hier nicht näher erläutert wird.

// 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 ) );

Das Definieren der Post-ID ist wahrscheinlich der entscheidende Teil, und wie Sie dies tun, hängt von der Logik Ihrer Funktionalität ab. Ich würde vorschlagen:

• Erstellen eines automatischen Entwurfs beim ersten Besuch dieser Seite und Speichern der in der globalen Variablen $ post_id zurückgegebenen Beitrags-ID.
• Speichern Sie dann den erstellten Beitrag mit derselben ID, wenn das Formular gesendet wird.

Vielleicht ist dies nicht Ihre ideale Lösung, aber es ist einen Versuch wert. Ich habe es durch googeln bekommen, aber leider habe ich die URL vergessen. Das anhängende Teil ähnelt dem im Artikel @goldenapples.

Hier ist die Grundfunktion.

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

Die Ajax-Funktion

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

}

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

Ich hoffe das hilft