Wonderful.

@metalsadman I tried creating a boot file manualy at first because this library’s name starts with @growthbunker/vueflags VScode created a folder with @growthbunker and vueflags.js file. And Adding the code above didn’t work. Now that I’ve read the whole thing about quasar new boot <name> I’ll try it next time when I need to plugin a library. Thank you very much.

@tlloyduk
I found vue-country-flag package and added the library to the boot array in the config
because I didn’t know how to create a new boot file a few hours ago.
Importing the library to the component that I was going to use simply worked. Thank you for your reply. It certainly gave me clues about how I can import libraries.

I’ve been working on this one since yesterday. It’ll be complete today I hope. @metalsadman Thanks again for helping me with the q-select.

It will be very helpful to me, once I deal with every other issue in the backend
Thanks a lot. This will be my first time implementing stripe. I’ll write about the news.

So, ok. I came up with a solution with factory function but it spits out an error.
This one is a free project on firebase.

import firebase from "firebase/app";
import "firebase/storage";

const firebaseConfig = {
  apiKey: "AIzaSyCp5sEmtSaDOjIdm5E88Wy41cCqFOoYd2o",
  authDomain: "someproject-43c3a.firebaseapp.com",
  projectId: "someproject-43c3a",
  storageBucket: "someproject-43c3a.appspot.com",
  messagingSenderId: "445668329191",
  appId: "1:445668329191:web:9bebd22c71e3ca8c05c442",
};

// init firebase
firebase.initializeApp(firebaseConfig);

// init services
const projectStorage = firebase.storage();


export {  projectStorage};

And this is the useStorage composable

import { projectStorage } from "../boot/firebase";
import { ref } from "vue";

const useStorage = () => {
  const error = ref(null);
  const downloadURL = ref(null);
  const filePath = ref(null);

  const uploadFile = async (file) => {
    filePath.value = `covers/${file.name}`;
    const storageRef = projectStorage.ref(filePath.value);
    
  try {
      const res = await storageRef.put(file);
      downloadURL.value = await res.ref.getDownloadURL();
    } catch (err) {
      console.log(err.message);
      error.value = err;
    }
  };
  return { uploadFile, downloadURL, error };
};

export default useStorage;

And this is where it’s placed in the the Quploader as a factory function.

<template>
  <q-page class="flex flex-center">
    <q-uploade
      multiple
      :factory="factory"
      @factory-failed="onFactoryFail"
    ></q-uploader>
  </q-page>
</template>

<script>
import { ref } from "vue";
import useStorage from "src/composables/useStorage";
import { projectStorage } from "src/boot/firebase";

export default {
  name: "PageIndex",

  setup(props) {
    const {
      uploadFile,
      downloadURL,  
    } = useStorage();

    //Events
    async function factory(files) {
      //   console.log("files[0].name:", files[0].name);
      await uploadFile(files[0]);
      console.log("downloadURL.value:", downloadURL.value);
    }
    function onFactoryFail(err, files) {
      console.log("factoryFail error:", err);
      console.log("factoryFail files:", files);
    }   

    return {
      factory, onFactoryFail
    };
  },
};
</script>

It’s giving me the downloadURL.value, so it’s successful in uploading. @factory-failed is giving me the following errors about url:

factoryFail error: TypeError: Cannot read property 'url' of undefined at getProp (xhr-uploader-plugin.js?e40a:131) at performUpload (xhr-uploader-plugin.js?e40a:136) at eval (xhr-uploader-plugin.js?e40a:116)

factoryFail files: [File] (Eventhough the bucket has that file uploaded in it)

Eventually this is the screen that the user ends up with:

A similar error has been recorded in this topic but didn’t receive a solution.

I’m having the same issue with @LIANG-FENG and @bruno-ronchetti
It uploads perfectly to Firebase. But I don’t have a url.
I tried moving from async await syntax to Promise syntax. It didn’t work.
I tried removing all the events from the quploader, except for the @factory-failed event. It didn’t work.
It gives error, but the thing works.

Maybe I can work with those Events under the Quploader Api. They seem to be offering @uploaded and @uploading… Also they can take files

@dobbel Yeay, more of them! Thanks for uncovering the mystery Quasar never ceases to amaze me.
Do you have any idea about what this refers to in the qv1{QUploaderBase} from "quasar"

So, I discovered 2 things.
First thing is that Q-uploader has secret v-on bindings, @added @rejected uploaded and @finish, which I believe should make their places in the documentation.
Second is the old way of Quploader for Firebase can be modified to receive vue refs.
But the following code has some issues with this.

For example I get Uncaught TypeError: Cannot read property 'files' of undefined error with this code.
But where do the this.files, this.uploadSize, this.uploadedSize, this.removeFile(file) come from?
Also this.$emit looks problematic, where should I put the context in this file? There is no setup configuration.

import { createUploaderComponent } from "quasar";
import { computed, ref } from "vue";

// export a Vue component
export default createUploaderComponent({
  // defining the QUploader plugin here

  name: "QFirebaseUploader", // your component's name

  props: {
    // ...your custom props
  },

  emits: [
    // ...your custom events name list
  ],

  injectPlugin({ props, emit, helpers }) {
    // can call any other composables here
    // as this function will run in the component's setup()

    const uploading = ref(false);
    const uploadTasks = ref([]);

    // [ REQUIRED! ]
    // We're working on uploading files
    const isUploading = computed(() => {
      return uploading.value;
    });

    // [ optional ]
    // Shows overlay on top of the
    // uploader signaling it's waiting
    // on something (blocks all controls)
    const isBusy = computed(() => {
      return uploading.value;
    });

    // [ REQUIRED! ]
    // Abort and clean up any process
    // that is in progress
    function abort() {
      uploadTasks.value.forEach((uploadTask) => {
        uploadTask.cancel();
      });

      uploading.value = false;
    }

    // [ REQUIRED! ]
    // Start the uploading process
    function upload() {
      uploading.value = true;

      this.files.forEach((file) => {
        const datetime = new Date().toISOString().split(".")[0];
        const newRef = this.path + datetime + "_" + file.name;
        const uploadTask = firebaseCs.ref(newRef).put(file);

        uploadTasks.value.push(uploadTask);

        uploadTask.on(
          "state_changed",
          (snapshot) => {
            this.uploadSize = snapshot.totalBytes;
            this.uploadedSize = snapshot.bytesTransferred;
          },
          (error) => console.log(error),
          () => {
            uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
              this.$emit("upload", {
                url: downloadURL,
                name: file.name,
                uploadedDate: datetime,
              });
              this.removeFile(file);
            });

            this.uploadedSize - this.uploadSize === 0 &&
              (uploading.value = false);
          }
        );
      });
    }

    return {
      isUploading,
      isBusy,

      abort,
      upload,
    };
  },
});

@dobbel Edited that minor detail. Thank you for pointing it.
Of course… It’s in beta and I want to discuss how we can improve.

So event.target.files doesn’t give me the list of files to begin with…

Hey there,

Can we elaborate a little bit on making this Q-Uploader documentation help more to the third party storage users? Firebase in particular.

I read it over and over, only to look at the screen with empty eyes, wondering where to start first.

So we have urls,methods and etc on the API, that’s a good sign if you have an endpoint to upload…

What if I need pre and post upload actions? Like retrieving user data beforehand or recording to database after uploading?

Then I’m obliged to use the template below, which leaves me clueless

If I want to call the function upload() , does it take (file) as argument. Will file be passed as prop?
Is it going to upload one by one or all at the same time.
How am I to abort the upload action of multiple files. How will I reference to that specific file and not others?
What if I need creating a prefix?
What if I need to record the event to a database?

I’m lost. How do you guys achieve all this with the Firebase?

// MyUploader.js
import { createUploaderComponent } from 'quasar'
import { computed } from 'vue'

// export a Vue component
export default createUploaderComponent({
  // defining the QUploader plugin here

  name: 'MyUploader', // your component's name

  props: {
    // ...your custom props
  },

  emits: [
    // ...your custom events name list
  ],

  injectPlugin ({ props, emit, helpers }) {
    // can call any other composables here
    // as this function will run in the component's setup()

    // [ REQUIRED! ]
    // We're working on uploading files
    const isUploading = computed(() => {
      // return <Boolean>
    })

    // [ optional ]
    // Shows overlay on top of the
    // uploader signaling it's waiting
    // on something (blocks all controls)
    const isBusy = computed(() => {
      // return <Boolean>
    })

    // [ REQUIRED! ]
    // Abort and clean up any process
    // that is in progress
    function abort () {
      // ...
    }

    // [ REQUIRED! ]
    // Start the uploading process
    function upload () {
      // ...
    }

    return {
      isUploading,
      isBusy,

      abort,
      upload
    }
  }
})

I realize that there is a FBQUploader for vue2 version but I don’t know how to implement his code to vue version 3.

Believe me if you’re asking this particular question you’re better off using a managed backend. Try Firebase. It’s easy to learn and goes a long long way.
But if you insist on taking the hard way, you might want to check the Nodemailer. You’re going to have a lot of fun (!) debugging stuff in your Authentication services and Database
And if you do so please… don’t ever give to end user the control of your mail module… like never…

@cynderkromi Yes you can create the messaging module with Quasar and store the messages in a backend solution. Then each time a user sends a message to another, the backend can trigger a mail notification. The easiest solution is Firebase. You can find courses telling exactly how you can set this up step by step. (search udemy first)

Sorry, I was busy for a while.
@cynderkromi have you considered making a messages module so your users can message each other?
You can send email notifications to the users when they receive a message…
~You’ve got a message from the {{user}} which says {{first100CharMessage}} Click and learn more~
You can’t control the outbound traffic with you current knowledge and It might be an invitation for trouble sent to your home address. You’ll have to log a lot of things. With user messages you’ll at least restrict the message traffic to be in between the users.

Quasar is a frontend framework. What you want to do involves mostly backend.