Manejo de la carga de archivos front-end, considerando la seguridad y la facilidad de uso.

Estoy buscando adaptar un complemento similar a un foro existente que no tiene facilidad para adjuntar medios.

El complemento funciona como un tipo de publicación personalizada, por lo que sería tan "simple" como adjuntar una imagen a una publicación.

Solo me preocupa adjuntar imágenes en lugar de cualquier tipo de archivo, pero el complemento sí utiliza wp_editory, como tal, la solución debería integrarse de alguna manera con eso. No estoy demasiado preocupado por crear un botón tinyMCE, siempre que la solución sea capaz de insertar una miniatura de la imagen en el área de texto tinyMCE.

Tenga en cuenta que me refiero al front-end de mi sitio web en lugar del área de administración.

En una situación absolutamente ideal, me gustaría que ocurriera este escenario:

• El usuario hace clic en "Hacer una pregunta"
• El uso ingresa los detalles de su publicación
• El usuario hace clic en un botón en la interfaz tinyMCE que, de forma similar a StackExchange, le pide al usuario que cargue un archivo.
• Luego, el sistema inserta la miniatura del tamaño correcto en el área de texto tinyMCE, después de haber procesado el archivo en este tamaño de miniatura
• Hacer clic en esta imagen debería ofrecer la misma funcionalidad que un archivo adjunto de imagen en una publicación
• El usuario puede hacer clic nuevamente para insertar una nueva imagen
• El usuario también puede eliminar la imagen del área de texto tinyMCE según sea necesario

Sin embargo, estoy feliz de que el botón tinyMCE sea periférico; si un cuadro de "carga de archivos" es significativamente más fácil, está bien.

Me encontré con este enlace, pero siempre estoy preocupado por leer artículos de WordPress en t'interwebs, ya que nunca estoy muy seguro de cuán seguros son, ni soy un experto en seguridad de php por ningún tramo de la imaginación.

Gracias por adelantado,

Creo que la forma más fácil, ya que ya está utilizando la wp_editorfunción, será incluir los botones de medios en la instancia de WP_Editor, de esta manera tendrá las funciones nativas, incluido el botón "Insertar en la publicación", incorporado gratis.

La forma en que haces esto obviamente depende del complemento con el que estás tratando de trabajar. Sin embargo, esto debería ayudarlo a comenzar. Incluya un código como este en una plantilla de página para mostrar el editor, y obtendrá un editor en su página. Incluir esto en un formulario y procesar los resultados es otro paso que no se detalla aquí.

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

Definir el ID de la publicación es probablemente la parte crítica, y cómo lo hagas dependerá de la lógica de tu funcionalidad. Yo sugeriría:

• Crear un borrador automático la primera vez que visite esta página y guardar el ID de publicación devuelto en la variable global $ post_id.
• Luego, guarde la publicación creada con esa misma ID cuando se envíe el formulario.

Quizás esta no sea su solución ideal, pero vale la pena intentarlo. Lo conseguí buscando en Google pero desafortunadamente olvidé la url. La parte adjunta es similar a la del artículo @goldenapples.

Aquí está la función básica.

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 función 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

}

El marcado

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

Espero que esto ayude