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

8

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,

dunc
quelle
Ich kenne den Autor dieses speziellen Tutorials. Pingen Sie ihn an, damit er Ihre Frage genauer beantworten kann ...
EAMann
Frage: Wenn Sie die wp_editor()Funktion bereits verwenden , verwenden Sie einfach die darin enthaltene Dickbox zum Hochladen von Medien. Ich habe das wp_editoram Frontend nicht verwendet , aber es gibt einige Leute, die es erfolgreich mit Bild-Uploads zum
Laufen gebracht haben
Danke EAMann. Goldenapples, die vorzuziehen wären, aber die Plugin-Autoren sagten, dass das Zulassen des Zugriffs auf wp_editordie Medien-Uploads Benutzern jeder Ebene Zugriff auf meine gesamte Medienbibliothek gewähren würde? Ich möchte nicht, dass das überhaupt der Fall ist - nur damit sie ihre eigenen hochladen.
Dunc
Ah, das stimmt. Ich habe nicht an dieses Problem gedacht. Ich habe die media-upload.phpQuelle schon eine Weile nicht mehr angesehen, bin mir aber ziemlich sicher, dass es einen Filter für media_upload_tabs gibt, in dem Sie die Registerkarte "Medienbibliothek" deaktivieren können. Ich werde es mir ansehen und sehen ...
Goldenapples

Antworten:

4

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.
goldene Äpfel
quelle
Für Anfänger nicht leicht zu verstehen. Danke trotzdem
whiteletters in blankpapers
6

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

ifdion
quelle
Können Sie zusammenfassen, was diese Funktion bewirkt?
Dunc
1
Sicher. Die erste Funktion ist die, die das Hochladen von Dateien übernimmt. Zunächst wird das hochgeladene Dateiarray neu angeordnet, damit es für eine 'foreach'-Schleife geeignet ist.
ifdion
1
wp_handle_uploadlegt die hochgeladene Datei im Verzeichnis wp-content / uploads ab. wp_insert_attachmentfängt die Dateiinformationen ab und speichert sie als Anhang in der Tabelle wp_posts. wp_generate_attachment_metadata und wp_update_attachment_metadata tut was gesagt wird. Der zweite Teil ist die Ajax-Funktion, die das auf dem Markup angezeigte Formular mithilfe der attach uploadsFunktion verarbeitet.
ifdion
1
Zusätzliche Referenz für die Neuanordnungsfunktion [Link] ( php.net/manual/en/features.file-upload.multiple.php )
ifdion