Menangani unggahan file front-end, dengan mempertimbangkan keamanan dan kemudahan penggunaan


8

Saya ingin mengadaptasi plugin mirip forum yang sudah ada yang tidak memiliki fasilitas untuk melampirkan media.

Plugin ini berfungsi sebagai Jenis Posting Kustom, jadi itu akan "sesederhana" seperti melampirkan gambar ke posting.

Saya hanya peduli tentang melampirkan gambar daripada jenis file apa pun, tetapi plugin tidak menggunakan wp_editordan dengan demikian solusinya harus dalam beberapa cara mengintegrasikan dengan itu. Saya tidak terlalu sibuk membuat tombol tinyMCE, asalkan solusinya mampu memasukkan thumbnail gambar ke dalam textarea tinyMCE.

Harap dicatat, saya merujuk ke front-end situs web saya daripada area admin.

Dalam situasi yang sangat ideal, saya ingin skenario ini terjadi:

  • Pengguna mengklik "Ajukan pertanyaan"
  • Gunakan memasuki detail posting mereka
  • Pengguna mengklik tombol pada antarmuka tinyMCE yang, mirip dengan StackExchange, meminta pengguna untuk mengunggah file.
  • Sistem kemudian memasukkan thumbnail berukuran benar ke dalam textarea tinyMCE, setelah menggeretakkan file ke dalam ukuran thumbnail ini
  • Mengklik gambar ini harus menawarkan fungsionalitas yang sama dengan lampiran gambar dalam Postingan
  • Pengguna kemudian dapat mengklik lagi untuk memasukkan gambar baru
  • Pengguna juga dapat menghapus gambar dari textarea tinyMCE sesuai kebutuhan

Namun, saya senang tombol tinyMCE menjadi periferal - jika kotak "unggah file" jauh lebih mudah, itu tidak masalah.

Saya menemukan tautan ini, tetapi saya selalu khawatir tentang membaca artikel WordPress di internet karena saya tidak pernah terlalu yakin seberapa amannya mereka, saya juga bukan pakar keamanan php oleh imajinasi apa pun.

Terima kasih sebelumnya,


Saya tahu penulis tutorial khusus itu. Ping dia sehingga dia bisa menjawab pertanyaan Anda lebih spesifik ...
EAMann

Pertanyaan: jika Anda sudah menggunakan wp_editor()fungsi ini, mengapa tidak menggunakan media upload yang sudah termasuk di dalamnya? Saya belum pernah menggunakan wp_editordi ujung depan, tetapi ada beberapa orang yang berhasil membuatnya bekerja dengan unggahan gambar, lihat di sini , misalnya ...
goldenapples

Terima kasih EAMann. Goldenappples yang akan lebih disukai tetapi penulis plugin mengatakan bahwa mengizinkan akses ke wp_editorunggahan media akan memberikan pengguna dari setiap tingkat akses ke seluruh perpustakaan media saya? Saya tidak ingin hal itu terjadi sama sekali - hanya bagi mereka untuk mengunggah sendiri.
dunc

Ah, benar juga. Saya tidak memikirkan masalah itu. Saya belum melihat media-upload.phpsumbernya sebentar, tapi saya cukup yakin ada filter di media_upload_tabs di mana Anda dapat menonaktifkan tab "Media Library". Saya akan melihatnya dan melihat ...
goldenapples

Jawaban:


4

Saya pikir cara termudah, karena Anda sudah menggunakan wp_editorfungsi akan hanya memasukkan tombol media dalam contoh WP_Editor - cara ini Anda akan memiliki fungsi asli, termasuk tombol "Masukkan ke dalam pos", dibangun di gratis.

Cara Anda melakukannya jelas tergantung pada plugin yang Anda coba gunakan. Namun, ini harus Anda mulai. Sertakan kode seperti ini di templat halaman untuk menampilkan editor, dan Anda akan mendapatkan editor di halaman Anda. Memasukkan ini dalam bentuk dan memproses hasilnya adalah langkah lain yang tidak dirinci di sini.

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

Menentukan ID kiriman mungkin merupakan bagian penting, dan cara Anda melakukannya tergantung pada logika fungsi Anda. Saya akan menyarankan:

  • Membuat konsep otomatis pada kunjungan pertama halaman ini, dan menyimpan ID posting yang dikembalikan dalam variabel $ post_id global.
  • Kemudian simpan pos yang dibuat dengan ID yang sama saat formulir dikirimkan.

Tidak mudah dimengerti bagi pemula.
Bagaimanapun,

6

Mungkin ini bukan solusi ideal Anda, tetapi patut dicoba. Dapat dengan googling tapi sayangnya saya lupa urlnya. Bagian yang dilampirkan mirip dengan yang ada di artikel @goldenapples.

Inilah fungsi dasarnya.

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

Fungsi 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

}

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>

Semoga bantuan ini


Bisakah Anda meringkas apa fungsi ini?
dunc

1
Tentu. Fungsi pertama adalah yang menangani unggahan file. Pertama-tama mengatur ulang array file yang diunggah, untuk membuatnya cocok untuk loop 'foreach'.
ifdion

1
wp_handle_uploadmenempatkan file yang diunggah di direktori wp-content / uploads. wp_insert_attachmentmenangkap info file dan menyimpannya sebagai lampiran di tabel wp_posts. wp_generate_attachment_metadata dan wp_update_attachment_metadata melakukan apa yang dikatakan. Bagian kedua adalah fungsi ajax yang memproses formulir yang ditunjukkan pada markup, menggunakan attach uploadsfungsi tersebut.
ifdion

1
Referensi tambahan untuk fungsi atur ulang [tautan] ( php.net/manual/en/features.file-upload.multiple.php )
ifdion
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.