I cannot add any file to Firebase Storage with Vue.js

<template>
  <div>
    <input type="file" id="dosya" @change="putDesign()" />
  </div>
</template>

<script>
import { initializeApp } from "firebase/app";
import { getStorage, ref } from "firebase/storage";

const firebaseConfig = {
  apiKey: ,
  authDomain: ,
  databaseURL: ,
  projectId: ,
  storageBucket: ,
  messagingSenderId: ,
  appId: ,
};

const app = initializeApp(firebaseConfig);
const storage = getStorage(app);

export default {
  data() {
    return {
      fileName: "",
    };
  },
  methods: {
    putDesign() {
      this.fileName = document.getElementById("dosya").files[0].name;
      const designRef = ref(storage, "design/" + this.fileName);
      designRef.put(this.fileName);
    },
  },
};
</script>

Hello friends, I am trying to add files to Firebase Storage, but it gives me this error: designRef is not a function. I tried some other ways too that I found on internet, but I couldn’t make it. How can I add files to Firestore Storage?

Answer

The Modular SDK doesn’t have a put() method. You need to use uploadBytes. Also, the file itself must be passed instead of just filename:

const file = document.getElementById("dosya").files[0]
this.fileName = file.name;
const designRef = ref(storage, "design/" + this.fileName);

uploadBytes(designRef, file).then((snapshot) => {
  console.log('Uploaded:', file.name);
});