Carregando arquivos no WordPress, revisitado: Parte 1 – O lado do cliente
Anos atrás, escrevi sobre como fazer upload de arquivos no WordPress a partir da área administrativa. Este post é praticamente uma atualização daquele post, mas abrange novas considerações que faço e alguns outros processos que julgo necessários.
Para este post, vou trabalhar com o exemplo de upload de um arquivo PDF e como também disponibilizá-lo na Biblioteca de Mídia.
Ao fazer isso, também estou planejando cobrir algumas considerações que devem ser feitas no lado do cliente e no lado do servidor, bem como coisas que devem ser observadas sempre que alguém estiver transferindo informações pela rede.
Upload de arquivos no WordPress (e para a biblioteca de mídia)
Antes de chegar à essência deste post, suponho que você tenha:
- Uma página de submenu ou configuração de página de administração com uma entrada de arquivo,
- Que você está configurado corretamente para aceitar tipos MIME,
- Que você está confortável com um pouco de JavaScript,
- E você se sente confortável trabalhando com mensagens personalizadas fora da API padrão do WordPress.
Nesse caso, todo o código deve ser relativamente autoexplicativo (não que eu não vá detalhar parte por parte), mas se algum dos itens acima parecer confuso, o post pode incluir algum material que exija um pouco de mais pesquisas no Codex ou sobre JavaScript que fornecerei aqui.
Independentemente disso, farei o que puder para ser o mais abrangente possível.
1 A Ideia Principal
A ideia do recurso é simples: você deseja dar ao usuário a capacidade de fazer upload de arquivos PDF através da área de administração do WordPress. Você também deseja que o arquivo esteja disponível na Biblioteca de mídia.
A capacidade de fazer isso não é difícil, mas existem maneiras de aprimorar a experiência do usuário que eu gostaria de abordar neste post também (como não poder fazer upload de nada até que o arquivo seja especificado na caixa de entrada, por exemplo exemplo).
2 A interface do usuário para verificar o tipo de arquivo
Primeiro, como eu disse no início do post, estou assumindo que você tem as bases estabelecidas para a página de administração no WordPress. Isso pode ser feito de algumas maneiras – optei por usar uma página de submenu, mas há algumas maneiras de fazer isso.
Em segundo lugar, a página é simples: inclui o título da página, um campo de entrada de arquivo e um botão ‘Upload’ que está desabilitado por padrão:
Observe que quando tento adicionar uma imagem que não é um PDF, recebo uma mensagem de erro e o botão ‘Upload’ ainda está desativado:
Mas quando adiciono um arquivo do tipo esperado, o botão ‘Upload’ é ativado:
Isso requer algumas coisas:
- JavaScript que detecta o tipo de arquivo,
- Parciais com visibilidade que podem ser alternados dinamicamente via JavaScript,
- E a capacidade de ativar ou desativar um botão de entrada de arquivo.
Uma observação importante é que no lado do cliente: podemos apenas assumir que o arquivo é o tipo de arquivo adequado com base em sua extensão. Teremos que trabalhar mais no lado do servidor para garantir que isso seja preciso.
Mas o ponto de verificar no lado do cliente para garantir que oferecemos a melhor experiência possível por meio de mensagens de notificação e opções de ativação ou desativação com base no tipo de arquivo.
3 Verificando o tipo de arquivo no lado do cliente
Suponha que neste exemplo temos uma parcial que é renderizada sempre que tentamos fazer upload de um arquivo que não é um PDF. Por padrão, o contêiner tem um style="display:none;" atributo que vamos manipular via JavaScript em breve:
Observe que este parcial tem um ID de invalid-file-message. Isso é um pouco generalizado, pois você pode querer prefixá-lo com outra coisa, mas para os propósitos deste post, você entendeu.
Para alternar a visibilidade dessa mensagem, você precisa configurar um manipulador em JavaScript para monitorar a alteração no elemento de entrada do arquivo.
4 Monitorando o elemento de entrada de arquivo
Neste ponto, é necessário haver um arquivo JavaScript que monitore o valor do evento de alteração do elemento de entrada do arquivo para que ele possa determinar qual curso de ação tomar.
Dê uma olhada neste código:
Este código procurará o valor do campo de entrada. Se o tipo de arquivo não corresponder a pdf, ele alternará a visibilidade da mensagem de erro acima; caso contrário, ele exibirá o botão de upload.
E lembre-se, é uma boa prática enfileirar este script apenas na área de administração e na página é necessário :
Tudo isso garantirá que seu plug-in registre corretamente o script na página em que ele é necessário, em nenhum outro lugar, e que ele verifique adequadamente se o arquivo especificado é do tipo correto.
Mas há mais
Originalmente, isso seria tudo um post, mas a quantidade de conteúdo para exigir tudo levaria muito tempo para filtrar (pelo menos, na minha opinião). Então, estou tentando torná-lo um pouco mais fácil de seguir, dividindo-o em alguns posts.
Como mencionado anteriormente, há muito o que podemos fazer no lado do cliente. Claro, há passos que o weUplo pode tomar para ajudar a melhorar a experiência do usuário, mas não é o mais seguro, e há mais trabalho a ser feito no lado do servidor.
Na segunda metade desta série, examinarei o PHP necessário para gerenciar o upload de arquivos e fazê-lo com segurança.