CORS STORAGE

1. Configurar CORS (Única vez por proyecto)

Ejecuta este comando en la terminal de tu entorno de desarrollo para que el navegador permita la subida de archivos:

Bash

# Crea el archivo de configuración

echo '[{"origin": ["*"], "method": ["GET", "POST", "PUT", "DELETE", "HEAD", "OPTIONS"], "responseHeader": ["Content-Type", "x-goog-resumable"], "maxAgeSeconds": 3600}]' > cors.json

# Aplícalo al bucket (Cámbialo por el nombre de tu bucket actual)

gsutil cors set cors.json gs://parroquialaternura.firebasestorage.app

2. Establecer Reglas en Firebase Studio

Copia y pega esto en la pestaña Rules de tu Firebase Storage para proteger los archivos según el rol de la Convención Lidertech:

JavaScript

rules_version = '2';

service firebase.storage {

  match /b/{bucket}/o {

    match /{allPaths=**} {

      allow read: if request.auth != null;

      allow write: if request.auth != null && 

        firestore.get(/databases/(default)/documents/Usuarios/$(request.auth.uid)).data.rolUsuario in ['admin', 'soporte'];

    }

  }

}

3. Vincular el Bucket en Angular

Asegúrate de que tu servicio InstanciaFirebase apunte manualmente al bucket oficial que ves en la consola para evitar errores 404:

TypeScript

// En el constructor de instancia-firebase.service.ts

const urlBucketOficial = 'gs://parroquialaternura.firebasestorage.app';

this.storage           = getStorage(this.app, urlBucketOficial);

4. Implementar Auditoría L10 (Rendimiento)

Para cumplir con la norma de los 16ms y evitar bloqueos en el Main-Thread de Angular:

• Previsualización: Usa URL.createObjectURL(archivo) en el componente.

• Limpieza: Ejecuta URL.revokeObjectURL(url) en el ngOnDestroy.

• Subida: Usa uploadBytesResumable para manejar barras de progreso con Signals.