ContatoSign in

Como implementar funcionalidade de upload de arquivos com Edge Functions

Este guia demonstra como implementar funcionalidade segura de upload de arquivos usando Azion Edge Functions e Edge Storage. Ao lidar com uploads de arquivos no edge, você pode fornecer velocidades de upload mais rápidas e melhor experiência do usuário mantendo segurança e escalabilidade.

Requisitos

Antes de começar, certifique-se de ter:

Código

Este é um exemplo de código de como usar Edge Functions com Edge Storage para implementar uma funcionalidade de upload de arquivos. O exemplo completo do código você pode encontrar no repositório GitHub.

import type { AzionBucketObject, AzionStorageResponse } from "azion/storage";
import { createObject } from "azion/storage";
import { Hono } from "hono";
import { fire } from "hono/service-worker";


const app = new Hono();


app.post("/upload", async (c) => {
  const body = await c.req.parseBody();
  const file = body["file"]; // File | string


  // First check if file is a valid File object
  if (
    !file ||
    typeof file !== "object" ||
    typeof file.arrayBuffer !== "function"
  ) {
    return c.json({ message: "Invalid file" }, 400);
  }


  // Check if file size exceeds 2MB limit
  const maxSize = 2 * 1024 * 1024; // 2MB
  if (file.size > maxSize) {
    return c.json({ message: "File size exceeds 2MB limit" }, 413);
  }


  try {
    const { data: newObject, error }: AzionStorageResponse<AzionBucketObject> =
      await createObject({
        bucket: process.env.BUCKET_NAME!,
        key: file.name,
        // @ts-expect-error content is wrongly typed
        content: await file.arrayBuffer(),
      });


    if (error) {
      throw new Error(error.message);
    }


    if (newObject) {
      console.log(`Object created with key: ${newObject.key}`);
    } else {
      console.error("Failed to create object", error);
    }


    // @ts-expect-error content is wrongly typed
    const content = new Uint8Array(newObject.content);


    return c.body(content, {
      status: 200,
      headers: {
        "Content-Type": file.type,
        "Content-Disposition": `attachment; filename="${newObject?.key}"`,
        "Content-Length": newObject?.size?.toString() ?? "0",
      },
    });
  } catch (error) {
    console.error("Error uploading file:", error);
    return c.json({ message: "Error uploading file" }, 500);
  }
});


fire(app);

Deploy na Azion

Passo 1: Autentique-se na Azion

  1. Faça login na sua conta Azion via CLI:
Terminal window
azion login
  1. Siga os prompts de autenticação para conectar sua CLI com sua conta Azion.

Passo 2: Faça o deploy da Edge Function

Faça o deploy de sua aplicação de upload de arquivos na edge network da Azion:

Terminal window
azion deploy

O processo de deploy irá:

  • Fazer upload do código da sua Edge Function
  • Configurar a edge application
  • Configurar as regras de roteamento necessárias
  • Configurar permissões de armazenamento
  • Fornecer um domínio único

Passo 3: Configure permissões de armazenamento

  1. Acesse Console Azion > Edge Storage
  2. Selecione seu bucket de armazenamento
  3. Configure permissões apropriadas para sua Edge Function ler/escrever arquivos

Passo 4: Acesse sua aplicação

Após o deploy, você receberá um domínio como https://xxxxxxx.map.azionedge.net. Sua aplicação de upload de arquivos estará disponível nesta URL em alguns minutos após a propagação do DNS.

Entendendo a implementação

Processo de upload de arquivos

A Edge Function de upload de arquivos tipicamente manipula:

  1. Validação de requisição: Verificação de tipos de arquivo, tamanhos e segurança
  2. Parsing de formulário multipart: Processamento de requisições multipart/form-data
  3. Processamento de arquivo: Validação e preparação de arquivos para armazenamento
  4. Upload para armazenamento: Armazenamento de arquivos no Edge Storage
  5. Geração de resposta: Retorno de status de upload e informações do arquivo

Considerações de segurança

  • Validação de tipo de arquivo: Permitir apenas tipos específicos de arquivo
  • Limites de tamanho: Impor restrições de tamanho máximo de arquivo
  • Scanning de vírus: Implementar detecção de malware quando possível
  • Controle de acesso: Validar permissões do usuário antes dos uploads
  • Sanitização de entrada: Limpar nomes de arquivos e metadados

Principais benefícios

  • Performance: Processamento de upload no edge reduz latência
  • Escalabilidade: Escala automaticamente com a demanda
  • Alcance global: Edge locations oferecem cobertura mundial
  • Eficiência de custo: Transferência de dados e custos de armazenamento otimizados

Testando sua aplicação de upload de arquivos

Passo 1: Teste a funcionalidade de upload de arquivos

  1. Navegue até sua aplicação implementada
  2. Use o formulário de upload para testar vários tipos de arquivo
  3. Verifique se os arquivos são armazenados com sucesso em seu bucket Edge Storage
  4. Teste limites de tamanho e restrições de tipo de arquivo

Passo 2: Teste recursos de segurança

  1. Validação de tipo de arquivo: Tente fazer upload de tipos de arquivo restritos
  2. Limites de tamanho: Teste com arquivos que excedem seu limite de tamanho
  3. Arquivos maliciosos: Teste com arquivos contendo conteúdo suspeito
  4. Path traversal: Verifique sanitização de nomes de arquivos

Passo 3: Testes de performance

  1. Velocidade de upload: Teste com vários tamanhos de arquivo
  2. Uploads simultâneos: Teste múltiplos uploads simultâneos
  3. Tratamento de erros: Teste interrupções de rede e falhas

Casos de uso comuns

  • Gerenciamento de documentos: Upload e armazenamento de documentos comerciais
  • Galerias de imagens: Lidar com uploads de fotos e imagens
  • Conteúdo de mídia: Processar uploads de arquivos de vídeo e áudio
  • Anexos de formulários: Lidar com anexos de arquivos em formulários web
  • Importação de dados: Processar uploads de arquivos CSV e de dados

Solução de problemas

Problemas comuns e soluções

  • Falhas de upload: Verifique limites de tamanho de arquivo e tipos permitidos
  • Erros de armazenamento: Verifique permissões do bucket e configuração
  • Problemas de performance: Otimize processamento de arquivos e operações de armazenamento
  • Questões de segurança: Revise lógica de validação e sanitização de arquivos

Melhores práticas de tratamento de erros

  1. Mensagens de erro claras: Forneça feedback específico aos usuários
  2. Registros: Implemente registros abrangentes de erros
  3. Mecanismos de retry: Lide com falhas temporárias eficientemente
  4. Indicadores de progresso: Mostre progresso de upload para arquivos grandes

Recursos avançados

Implementando processamento de arquivos

Você pode estender a funcionalidade básica de upload com:

  • Redimensionamento de imagens: Redimensionar automaticamente imagens enviadas
  • Conversão de formato: Converter arquivos para diferentes formatos
  • Extração de metadados: Extrair e armazenar metadados de arquivos
  • Geração de thumbnails: Criar imagens de pré-visualização

Adicionando autenticação

Implemente autenticação de usuário para proteger uploads de arquivos:

// Exemplo de verificação de autenticação
function authenticateUser(request) {
    const authHeader = request.headers.get('Authorization');
    // Implemente sua lógica de autenticação
    return validateToken(authHeader);
}

Próximos passos

  • Explore técnicas avançadas de processamento de arquivos
  • Implemente recursos de exclusão e gerenciamento de arquivos
  • Adicione autenticação e autorização de usuário
  • Integre com outros produtos Azion como Edge Cache
  • Monitore performance de upload e otimize adequadamente