Manipular uploads de arquivos front-end, considerando a segurança e a facilidade de uso

8

Estou procurando adaptar um plug-in existente semelhante a um fórum que não possui recursos para anexar mídia.

O plug-in funciona como um tipo de postagem personalizado, por isso seria tão "simples" quanto anexar uma imagem a uma postagem.

Estou preocupado apenas em anexar imagens em vez de qualquer tipo de arquivo, mas o plug-in usa wp_editor e, como tal, a solução deve de alguma forma integrar-se a isso. Não estou muito preocupado em criar um botão tinyMCE, desde que a solução seja capaz de inserir uma miniatura da imagem na área de texto tinyMCE.

Por favor, note que estou me referindo ao front-end do meu site, em vez da área de administração.

Em uma situação absolutamente ideal, gostaria que esse cenário ocorresse:

  • O usuário clica em "Fazer uma pergunta"
  • Uso insere os detalhes da postagem
  • O usuário clica em um botão na interface tinyMCE, que, semelhante ao StackExchange, solicita ao usuário o upload de um arquivo.
  • O sistema insere a miniatura de tamanho correto na área de texto tinyMCE, depois de ter crunched o arquivo nesse tamanho de miniatura
  • Clicar nessa imagem deve oferecer a mesma funcionalidade que um anexo de imagem em um Post
  • O usuário pode clicar novamente para inserir uma nova imagem
  • O usuário também pode excluir a imagem da área de texto tinyMCE conforme necessário

No entanto, fico feliz que o botão tinyMCE seja periférico - se uma caixa de "upload de arquivo" for significativamente mais fácil, tudo bem.

Eu encontrei este link mas estou sempre apreensivo sobre a leitura de artigos do WordPress em t'interwebs, já que nunca tenho certeza de quão seguros eles são, nem sou um especialista em segurança do php por qualquer extensão da imaginação.

Agradecemos antecipadamente

    
por dunc 12.02.2012 / 17:55

2 respostas

4

Acho que a maneira mais fácil, já que você já está usando a função wp_editor , será incluir apenas os botões de mídia na instância do WP_Editor - assim você terá as funções nativas, incluindo o "Insert into post "botão, construído de graça.

Como você faz isso, obviamente, depende do plugin com o qual você está tentando trabalhar. No entanto, isso deve começar. Inclua um código como este em um modelo de página para exibir o editor e você terá um editor na sua página. Incluir isso em um formulário e processar os resultados é outra etapa não detalhada aqui.

// 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 o ID do post é provavelmente a parte crítica, e como você faz isso dependerá da lógica da sua funcionalidade. Eu sugeriria:

  • Criando um rascunho automático na primeira visita a esta página e salvando o ID do post retornado na variável global $ post_id.
  • Em seguida, salve a postagem criada com o mesmo ID quando o formulário for enviado.
por goldenapples 15.02.2012 / 18:45
6

Talvez esta não seja a sua solução ideal, mas vale a pena tentar. Entendi googling mas infelizmente eu esqueci o url. A parte anexa é semelhante à do artigo @goldenapples.

Aqui está a função 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;
}

A função 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

}

A marcação

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

    
por ifdion 15.02.2012 / 05:02