Upload de arquivos

A plataforma suporta upload direto de arquivos para apps gerados via Bea.files (ou props.files).

Tipos suportados

Limites

• 200MB por arquivo
• 50 arquivos por app

Como usar no código

// Upload (a partir de um input file)
const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
  const file = e.target.files?.[0];
  if (!file) return;
  const result = await files.upload(file);
  // result = { id, fileName, url, mimeType, fileSize }
  console.log(result.url); // URL pública pra usar em <img>, <video>, <a>
};

// Listar
const list = await files.list();

// Deletar
await files.remove(fileId);

Image transforms (servidor)

Pra imagens, adicione query params na URL pra otimizar:

<img src={`${img.url}?w=200&h=200&fmt=webp`} />

• ?w=300 — largura 300px (mantém ratio)
• ?w=300&h=200 — 300×200 com fit="cover" (recorte central)
• ?w=300&h=200&fit=contain — letterbox (preserva tudo)
• ?fmt=webp&q=80 — webp 80% qualidade
• ?fmt=avif&q=70 — avif (menor mas decode mais lento)

SVG e GIF não são transformados (vetor / animação preservada).

Streaming de vídeo (HTTP Range)

Vídeos suportam seek automático no player HTML5:

<video src={video.url} controls className="w-full rounded-lg" />

O backend serve o vídeo via Content-Range: bytes=start-end quando o player pede. Resultado: começa a tocar imediatamente, seek funciona normal, sem pré-carregar o arquivo todo.

Aceitar tipos específicos no input

Pra restringir o file picker no client:

// Só imagem
<input type="file" accept="image/*" />

// Só vídeo
<input type="file" accept="video/mp4,video/webm,video/ogg,video/quicktime" />

// Imagem OU vídeo
<input type="file" accept="image/*,video/*" />

CORS / apps publicados

Arquivos são servidos com Access-Control-Allow-Origin: * pra funcionarem em apps publicados (subdomain.theo.beadev.ai) lendo arquivos da plataforma.

Quando NÃO usar

Pra arquivos maiores que 200MB (cursos longos, podcasts de horas), use provider externo:

// Vimeo, Mux, Cloudflare Stream, R2, S3...
<video src="https://stream.example.com/abc123.m3u8" controls />

A plataforma é pra arquivos do contexto do app — não substitui CDN dedicado pra mídia massiva.

Próximos passos

• Bea.helpers — outros utilitários
• Problemas comuns — debug de upload