Search code examples
javascriptfirebasevue.jsgoogle-cloud-platformgoogle-cloud-storage

Upload file to firebase storage folder with Vue js

I'm using Vue js 3 and Firebase 9. I'm trying to upload images to a specific folder, but I'm having troubles. When I do this, it renames file to 'product' and uploads it to the main folder.

uploadImage(e) {
      const file = e.target.files[0];
      const storage = getStorage();
      const storageRef = storageReference(storage, 'products/');
      uploadBytes(storageRef, file);
    }

When I do this, the file goes up with its name but in the main folder.

const storageRef = storageReference(storage, file.name);

how do I make it go up in the products folder with the name it already has? Thank you!

Solution

  • As you will see in the doc, you need to create the StorageReference as follows, with the ref() method:

    const storageRef = ref(storage, 'products/' + file.name);

    Or with template literals:

    const storageRef = ref(storage, `products/${file.name}`);