El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem com carregar fitxers a l'emmagatzematge de Firebase. L'emmagatzematge de Firebase és una solució potent i escalable per emmagatzemar i servir contingut generat per l'usuari, com ara fotos, vídeos i altres fitxers multimèdia.

Objectius

Entendre com configurar l'emmagatzematge de Firebase.
Aprendre a carregar fitxers des d'una aplicació.
Gestionar errors comuns durant el procés de càrrega.

Configuració de l'emmagatzematge de Firebase

Abans de començar a carregar fitxers, hem de configurar l'emmagatzematge de Firebase al nostre projecte. Segueix aquests passos:

Accedeix a la consola de Firebase: Inicia sessió a la consola de Firebase.
Selecciona el teu projecte: Tria el projecte al qual vols afegir l'emmagatzematge.
Afegeix l'emmagatzematge: A la barra lateral, selecciona "Storage" i fes clic a "Get started". Segueix les instruccions per configurar les regles de seguretat inicials.

Carregar fitxers des d'una aplicació

Exemple en JavaScript

A continuació, veurem com carregar fitxers utilitzant JavaScript. Assegura't d'haver instal·lat el SDK de Firebase i d'haver inicialitzat Firebase al teu projecte.

// Importa Firebase
import { initializeApp } from "firebase/app";
import { getStorage, ref, uploadBytesResumable, getDownloadURL } from "firebase/storage";

// Configuració de Firebase
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

// Inicialitza Firebase
const app = initializeApp(firebaseConfig);
const storage = getStorage(app);

// Funció per carregar fitxers
function uploadFile(file) {
  // Crea una referència al fitxer
  const storageRef = ref(storage, 'uploads/' + file.name);

  // Inicia la càrrega del fitxer
  const uploadTask = uploadBytesResumable(storageRef, file);

  // Registra esdeveniments durant la càrrega
  uploadTask.on('state_changed', 
    (snapshot) => {
      // Progrés de la càrrega
      const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
      console.log('Càrrega és ' + progress + '% completa');
    }, 
    (error) => {
      // Gestió d'errors
      console.error('Error durant la càrrega:', error);
    }, 
    () => {
      // Càrrega completada amb èxit
      getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
        console.log('Fitxer disponible a:', downloadURL);
      });
    }
  );
}

// Exemple d'ús
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  uploadFile(file);
});

Explicació del codi

Inicialització de Firebase: Importem i inicialitzem Firebase amb la configuració del nostre projecte.
Referència al fitxer: Creem una referència al fitxer que volem carregar utilitzant ref.
Càrrega del fitxer: Utilitzem uploadBytesResumable per iniciar la càrrega del fitxer.
Seguiment de l'estat de la càrrega: Utilitzem on('state_changed') per registrar esdeveniments durant la càrrega, com ara el progrés i la gestió d'errors.
Obtenir l'URL de descàrrega: Quan la càrrega es completa amb èxit, obtenim l'URL de descàrrega del fitxer utilitzant getDownloadURL.

Errors comuns i consells

Errors de permisos: Assegura't que les regles de seguretat de l'emmagatzematge permeten la càrrega de fitxers per als usuaris autenticats.
Fitxers massa grans: Si el fitxer és massa gran, pot ser necessari dividir-lo en parts més petites o augmentar la quota d'emmagatzematge.
Connexió lenta: En cas de connexions lentes, considera implementar una barra de progrés per millorar l'experiència de l'usuari.

Exercici pràctic

Exercici

Crea una aplicació web senzilla que permeti als usuaris carregar imatges al teu emmagatzematge de Firebase i mostrar una vista prèvia de la imatge carregada.

Solució

<!DOCTYPE html>
<html>
<head>
  <title>Carregar Imatges</title>
</head>
<body>
  <input type="file" id="fileInput" accept="image/*">
  <img id="preview" src="" alt="Vista prèvia de la imatge" style="display:none; width: 200px; height: auto;">
  <script type="module">
    // Importa Firebase
    import { initializeApp } from "firebase/app";
    import { getStorage, ref, uploadBytesResumable, getDownloadURL } from "firebase/storage";

    // Configuració de Firebase
    const firebaseConfig = {
      apiKey: "YOUR_API_KEY",
      authDomain: "YOUR_AUTH_DOMAIN",
      projectId: "YOUR_PROJECT_ID",
      storageBucket: "YOUR_STORAGE_BUCKET",
      messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
      appId: "YOUR_APP_ID"
    };

    // Inicialitza Firebase
    const app = initializeApp(firebaseConfig);
    const storage = getStorage(app);

    // Funció per carregar fitxers
    function uploadFile(file) {
      const storageRef = ref(storage, 'uploads/' + file.name);
      const uploadTask = uploadBytesResumable(storageRef, file);

      uploadTask.on('state_changed', 
        (snapshot) => {
          const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
          console.log('Càrrega és ' + progress + '% completa');
        }, 
        (error) => {
          console.error('Error durant la càrrega:', error);
        }, 
        () => {
          getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
            const preview = document.getElementById('preview');
            preview.src = downloadURL;
            preview.style.display = 'block';
            console.log('Fitxer disponible a:', downloadURL);
          });
        }
      );
    }

    // Exemple d'ús
    const fileInput = document.getElementById('fileInput');
    fileInput.addEventListener('change', (event) => {
      const file = event.target.files[0];
      uploadFile(file);
    });
  </script>
</body>
</html>

Explicació de la solució

HTML: Creem un element input per seleccionar fitxers i un element img per mostrar la vista prèvia de la imatge.
JavaScript: Utilitzem el mateix codi de càrrega de fitxers que abans, però afegim una línia per actualitzar l'element img amb l'URL de descàrrega del fitxer carregat.

Conclusió

En aquesta secció, hem après com carregar fitxers a l'emmagatzematge de Firebase utilitzant JavaScript. Hem vist com configurar l'emmagatzematge, carregar fitxers i gestionar errors comuns. També hem creat una aplicació pràctica per carregar imatges i mostrar una vista prèvia. En el següent tema, aprendrem com descarregar fitxers des de l'emmagatzematge de Firebase.

Carregar fitxers

Objectius

Configuració de l'emmagatzematge de Firebase

Carregar fitxers des d'una aplicació

Exemple en JavaScript

Explicació del codi

Errors comuns i consells

Exercici pràctic

Exercici

Solució

Explicació de la solució

Conclusió

Curs de Firebase

Mòdul 1: Introducció a Firebase

Mòdul 2: Autenticació de Firebase

Mòdul 3: Base de dades en temps real de Firebase

Mòdul 4: Cloud Firestore

Mòdul 5: Emmagatzematge de Firebase

Mòdul 6: Missatgeria en el núvol de Firebase

Mòdul 7: Analítica de Firebase

Mòdul 8: Funcions de Firebase

Mòdul 9: Monitoratge del rendiment de Firebase

Mòdul 10: Laboratori de proves de Firebase

Mòdul 11: Temes avançats de Firebase