2

Hola estoy empezando a trabajar con firebase y quiero hacer uso de storage para subir una foto o cualqueir docuemnto, solo que alperecer mi funcion onclick no esta definida a lo cual no logro entedner talvez estoy olvidando algo:

<div>
    <h3>Subir Archivo</h3>
    <input type="file" id="fileToUpload">
    <hr>
    <button onclick="subirArchivo()">Subir</button>
</div>

<script type="module">
    // Import the functions you need from the SDKs you need
    import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-app.js";
    import { } from 'https://www.gstatic.com/firebasejs/9.0.2/firebase-storage.js';
    // TODO: Add SDKs for Firebase products that you want to use
    // https://firebase.google.com/docs/web/setup#available-libraries

    // Your web app's Firebase configuration
    const firebaseConfig = {

    };

    // Initialize Firebase
    const app = initializeApp(firebaseConfig);

    async function subirArchivo() {
        inputFile = document.getElementById("fileToUpload");
        if (inputFile.files.length == 0) {
            alert("Por favor seleciona un archivo");
            return
        } else {
            let file = inputFile.files[0];
            let storageRef = firebase.storage().ref(file.name);
            await storageRef.put(file);
            console.log("Terminó la descarga...");

            abrirArchivo(file.name);
        }
    }

    async function abrirArchivo(path) {
        let storageRef = firebase.storage().ref(path);
        let url = await storageRef.getDownloadURL();
        window.open(url);
    }
</script>

Elimine la parte de firebaseConfig ya que se supone es personal pero si la nececitan diganme, este es el error que arroja la consola: index.html:15 Uncaught ReferenceError: subirArchivo is not defined

1 respuesta 1

1

Problema

El problema está en que estás declarando el script como un módulo type=module, lo que hace que el alcance del código que escribes quede dentro del mismo.

Es por eso que obtienes un ReferenceError o error de referencia. Ya que fuera de dicho módulo no existe la función subirArchivo.

Solución

  • Para solucionar esto puedes declarar globalmente la función subirArchivo agregándola dentro del objeto window de la siguiente manera:
<script type="module">
//...
    async function subirArchivo() {
        inputFile = document.getElementById("fileToUpload");
        if (inputFile.files.length == 0) {
            alert("Por favor seleciona un archivo");
            return
        } else {
            let file = inputFile.files[0];
            let storageRef = firebase.storage().ref(file.name);
            await storageRef.put(file);
            console.log("Terminó la descarga...");

            abrirArchivo(file.name);
        }
    }
    window.subirArchivo = subirArchivo;
</script>

Para usarlo:

<div>
    <h3>Subir Archivo</h3>
    <hr>
    <button onclick="subirArchivo()">Ejecutar función</button>
</div>
<script type="module">
//...
    async function subirArchivo() {
       console.log("hola");
    }
    window.subirArchivo = subirArchivo;
</script>


  • También podrías usar un eventListener dentro del script.

Esto sería:

<h3>Subir Archivo</h3>
<hr>
<button id="subir">Subir</button>
<script type="module">
  async function subirArchivo() {
     console.log("hola");
  }

  document.querySelector('#subir')
    .addEventListener('click', subirArchivo);
</script>

Anexos

Puedes ver mas sobre módulos aquí.

Para ejemplificar esto del alcance dentro y fuera de un módulo veamos el siguiente ejemplo:

<script type="module">
    // esta función está disponible solo en este bloque <script>
    function myFunc() {
        console.log("Myfunc ejecutada correctamente");
    }
  console.log("llamo a myFunc() correctamente");
  myFunc();
</script>

<script type="module">
    // reference error : myFunc is not defined
  console.log("llamo a myFunc() con error de referencia");
    myFunc(); // myFunc no está definida en este bloque <script> ya que es otro módulo distinto
</script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.