Manipulação de uploads de arquivos front-end, considerando a segurança e a facilidade de uso

8

Estou procurando adaptar um plugin semelhante a um fórum existente, que não tem facilidade para anexar mídia.

O plug-in funciona como um Tipo de postagem personalizado, portanto, seria "simples" como anexar uma imagem a uma postagem.

Estou preocupado apenas em anexar imagens em vez de qualquer tipo de arquivo, mas o plugin usa wp_editore, 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.

Observe que estou me referindo ao front-end do meu site, e não à área de administração.

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

  • O usuário clica em "Fazer uma pergunta"
  • Use insere os detalhes da postagem
  • O usuário clica em um botão na interface tinyMCE que, semelhante ao StackExchange, solicita que o usuário envie um arquivo.
  • O sistema insere a miniatura de tamanho correto na área de texto tinyMCE, processando o arquivo nesse tamanho de miniatura
  • Clicar nesta imagem deve oferecer a mesma funcionalidade que um anexo de imagem em uma Postagem
  • 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, estou feliz que o botão tinyMCE seja periférico - se uma caixa de "upload de arquivo" for significativamente mais fácil, tudo bem.

Encontrei este link, mas estou sempre apreensivo sobre a leitura de artigos do WordPress nas redes, pois nunca tenho muita certeza de como eles são seguros, nem sou especialista em segurança php por qualquer extensão da imaginação.

Desde já, obrigado,

dunc
fonte
Conheço o autor desse tutorial em particular. Ping-lo para que ele possa responder a sua pergunta mais especificamente ...
EAMann
Pergunta: se você já está usando a wp_editor()função, por que não usar apenas a caixa de upload de mídia incluída nela? Eu não usei o wp_editorno front-end, mas há algumas pessoas que tenham obtido com sucesso trabalhar com uploads de imagens, veja aqui , por exemplo ...
goldenapples
Obrigado EAMann. maçãs douradas que seriam preferíveis, mas os autores do plugin disseram que permitir o acesso aos wp_editoruploads de mídia daria aos usuários de qualquer nível acesso a toda a minha biblioteca de mídia? Eu não gostaria que fosse esse o caso - apenas para eles fazerem o upload deles.
21412 dunc
Ah, é verdade. Eu não pensei nessa questão. Não vejo a media-upload.phpfonte há algum tempo, mas tenho certeza de que há um filtro em media_upload_tabs, onde você pode desativar a guia "Biblioteca de mídia". Vou dar uma olhada e ver ...
goldenapples

Respostas:

4

Eu acho que a maneira mais fácil, já que você já está usando a wp_editorfunção, basta incluir os botões de mídia na instância WP_Editor - dessa forma, você terá as funções nativas, incluindo o botão "Inserir na postagem", incorporado de graça.

Como você faz isso obviamente depende do plugin com o qual você está tentando trabalhar. No entanto, isso deve ajudá-lo a começar. Inclua um código como este em um modelo de página para exibir o editor, e você receberá um editor em 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 da postagem é provavelmente a parte crítica, e como você faz isso dependerá da lógica de sua funcionalidade. Eu sugeriria:

  • Criar um rascunho automático ao visitar esta página pela primeira vez e salvar o ID da postagem retornado na variável global $ post_id.
  • Em seguida, salve a postagem criada com o mesmo ID quando o formulário for enviado.
maçãs douradas
fonte
Não é fácil de entender para iniciantes. Obrigado de qualquer maneira
whiteletters em whitepapers
6

Talvez essa não seja a sua solução ideal, mas vale a pena tentar. Entendi, pesquisando no Google, mas infelizmente eu esqueci o URL. A peça anexada é 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

ifdion
fonte
Você pode resumir o que essa função faz?
22412 dunc
11
Certo. A primeira função é aquela que lida com uploads de arquivos. Antes de tudo, ele reorganiza a matriz de arquivos enviados, para torná-la adequada para um loop 'foreach'.
Ifdion
11
wp_handle_uploadcoloca o arquivo carregado no diretório wp-content / uploads. wp_insert_attachmentcaptura as informações do arquivo e as salva como um anexo na tabela wp_posts. wp_generate_attachment_metadata e wp_update_attachment_metadata faz o que diz. A segunda parte é a função ajax que processa o formulário mostrado na marcação, usando a attach uploadsfunção
ifdion
11
Referência adicional para a função de reorganização [link] ( php.net/manual/en/features.file-upload.multiple.php )
ifdion 17/02/2012