Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How do I upload images to Firebase, with CDN and version 9.5.0?

I’m trying to upload an image through JavaScript, with Firebase Storage. But, i can’t find the method to upload the files on version 9.5.0, using the CDN (<script type="module">)

I’ve searched around the documenntation, and I found "storageRef.put", but, it gives me Uncaught TypeError: storage.put is not a function on the console.

Can someone help me?
JavaScript code:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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>

>Solution :

In the change from Firebase v8 (namespaced) to v9 (modular) they had an overhaul of the SDK. Version 9 is not a drop in replacement for v8.

In your code I’m seeing v8 in the HTML and v9 in the javascript.

So using only v9, the example from their docs:

<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
  uploadBytes(storageRef, file).then((snapshot) => {
    console.log('Uploaded a blob or file!');
  });
</script>

As a note, you can use v9 with v8 syntax but you need to pull in the compat packages as well. You can check their upgrade guide for more information.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading