it-swarm.com.de

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

Ich möchte ein vorhandenes forumartiges 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 Bilds an einen Beitrag.

Ich mache mir nur Gedanken über das Anhängen von Bildern und nicht über einen Dateityp, aber das Plugin verwendet wp_editor und als solche sollte die Lösung in gewisser Weise in diese integriert werden. Das Erstellen einer tinyMCE-Schaltfläche macht mir keine allzu großen Sorgen, solange die Lösung in der Lage ist, eine Miniaturansicht des Bildes in das tinyMCE-Textfeld einzufügen.

Bitte beachten Sie, dass ich mich nicht auf den Administrationsbereich, sondern auf das Front-End meiner Website beziehe.

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

  • Benutzer klickt auf "Frage stellen"
  • Verwenden Sie gibt ihre Post-Details
  • Der Benutzer klickt auf der tinyMCE-Oberfläche auf eine Schaltfläche, die den Benutzer, ähnlich wie bei StackExchange, auffordert, eine Datei hochzuladen.
  • Das System fügt dann das Miniaturbild mit der richtigen Größe in das tinyMCE-Textfeld ein, nachdem die Datei auf diese Miniaturbildgröße verkleinert wurde
  • Das Klicken auf dieses Bild sollte die gleiche 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 bin jedoch froh, dass die tinyMCE-Schaltfläche Peripheriegeräte ist - wenn ein Feld zum Hochladen von Dateien wesentlich einfacher ist, ist das in Ordnung.

Ich bin auf diesen Link gestoßen, aber ich bin immer besorgt, wenn es darum geht, WordPress-Artikel auf t'interwebs zu lesen, da ich mir nie sicher bin, wie sicher sie sind, und auch kein Experte für PHP-Sicherheit Phantasie.

Danke im Voraus,

8
dunc

Ich denke, der einfachste Weg, da Sie die wp_editor -Funktion bereits verwenden, besteht darin, nur die Medienschaltflächen in die WP_Editor-Instanz aufzunehmen. Auf diese Weise werden die nativen Funktionen, einschließlich der Schaltfläche "In Post einfügen", erstellt 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. Dies in ein Formular aufzunehmen und die Ergebnisse zu verarbeiten, 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 Beitrags-ID ist wahrscheinlich der kritische Teil. Wie Sie dies tun, hängt von der Logik Ihrer Funktionalität ab. Ich würde vorschlagen:

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

Vielleicht ist dies nicht die ideale Lösung, aber es ist einen Versuch wert. Habe es durch googeln bekommen aber leider habe ich die url vergessen. Das Anbauteil ähnelt dem auf @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

6
ifdion