Estoy tratando de cargar una imagen a través de JavaScript, con Firebase Storage. Pero no puedo encontrar el método para cargar los archivos en la versión 9.5.0, usando el CDN ( <script type="module"> )
Busqué en la documentación y encontré "storageRef.put", pero me da Uncaught TypeError: storage.put is not a function en la consola.
¿Alguien me puede ayudar? Código JavaScript:
import { getStorage, ref } from "https://www.gstatic.com/firebasejs/9.5.0/firebase-storage.js"; const storage = getStorage(app); const storageRef = ref(storage); function submit() { const file = document.getElementById("file").files[0]; storageRef.put(file); } document.getElementById("submit").addEventListener("click", submit);HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/firebase/8.2.2/firebase-app.min.js"></script> <input type="file" id="file"><br><br> <button id="submit">Enviar</button>En el cambio de Firebase v8 (namespaced) a v9 (modular) tuvieron una revisión del SDK. La versión 9 no es un reemplazo directo para v8.
En su código, veo v8 en HTML y v9 en javascript.
Entonces, usando solo v9, el ejemplo de sus documentos :
<script type="module"> // Import the functions you need from the SDKs you need import { initializeApp } from "https://www.gstatic.com/firebasejs/9.5.0/firebase-app.js"; import { getStorage, ref, uploadBytes } from "https://www.gstatic.com/firebasejs/9.5.0/firebase-storage.js"; // Your web app's Firebase configuration // For Firebase JS SDK v7.20.0 and later, measurementId is optional const firebaseConfig = { apiKey: "", authDomain: "", projectId: "", storageBucket: "", messagingSenderId: "", appId: "", measurementId: "" }; // Initialize Firebase const firebaseApp = initializeApp(firebaseConfig); // Get a reference to the storage service, which is used to create references in your storage bucket const storage = getStorage(firebaseApp); const storageRef = ref(storage, 'some-child'); // 'file' comes from the Blob or File API const file = document.getElementById("file").files[0]; uploadBytes(storageRef, file).then((snapshot) => { console.log('Uploaded a blob or file!'); }); </script>Como nota, puede usar v9 con sintaxis v8, pero también necesita extraer los paquetes de compatibilidad. Puede consultar su guía de actualización para obtener más información.