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.

@metalsadman Actually, I don’t assume myself knowing anything. I look at the documentation and try to find my way. My eyes simply couldn’t pick up anything about the fact that refs could be referred by xyz.value, on neither vue3 documentation nor the quasar’s. I’m a novice with some JS knowledge. Bare with me, please.

And thank you. Of course I didn’t know that. Now I’ll try that

@hawkeye64 I’ve read quite a lot of instances where Quasar CSS led people to other frameworks… Just so that you know

@dobbel Sortable as in Sortable.js, I think.
An example would be like this:
https://sortablejs.github.io/vue.draggable.next/#/table-example

@metalsadman Actually, I don’t assume myself knowing anything. I look at the documentation and try to find my way. My eyes simply couldn’t pick up anything about the fact that refs could be referred by xyz.value, on neither vue3 documentation nor the quasar’s. I’m a novice with some JS knowledge. Bare with me, please.

And thank you. Of course I didn’t know that. Now I’ll try that

Anyway, I tried the putting scope.reset() in the queuedFiles list template, (as it seems like only place to access the prescribed reset(). function is through scope in the documentation)
It resets the whole thing… So I needed use the event @finish event but it didn’t fit any place I’ve inserted so far. I probably don’t understand this component at all. Why is it so hard? I am doing guess work here.
This is the Codepen I’ve tried doing it.

@dobbel said in Q-Uploader with Composition API:

this.$refs[myRefToQUploader].reset()

Thank you, but this doesnt make sense in composition api.

@rstoenescu Great! I tried running reset() method in the MyUploader.js but I am probably doing something wrong because, it’s giving me ReferenceError: reset is not defined at eval error.

So I tried creating my own function reset() inside the MyUploader.js but it has the infamous uploadSize.value in the original example, which is not inside const state, so I can’t use the helpers object for reaching it.

  function reset () {
    if (props.disable === false) {
      state.abort()
      state.uploadedSize.value = 0
      uploadSize.value = 0
      revokeImgURLs()
      state.files.value = []
      state.queuedFiles.value = []
      state.uploadedFiles.value = []
    }
  }

I’m sure there must be a proper way of calling that function but I lack the knowledge.

Sorry to bother for this, but I’ve got kind of obsessed with it now. Wouldn’t putting uploadSize inside the const state = {uploadSize: ref(0)} in the uploader-core be a little bit more flexible?

@metalsadman Great! Thank you for point that out.

Now let’s me see how I can fix the uploadSizeLabel issue.

Uploading (A feature to block parallel uploading would be great)

Uploaded

Remove File (See that removeFile() does not recalculate the uploadSizeLabel because I can’t reach uploadSize from helpers. It should be configured via a PR in uploader-core.js)

And this problem leads to the following, when all files are removed.

And if you add a file, it keeps adding to the old uploadSize.
2.8 MB + 400 KB = 3.2 MB // true but this is not the behavior you’d expect to see.

When done with uploading, the label is a complete(!) mess

I have converted github/birchb 's wonderful q-uploader firebase implementation into the composition api using this files above. And it’s uploading, updating the progess and removing the file on demand. It has 2 minor issues with emitting the ‘uploaded’ event and calculating the blue uploadSize label on top of the component when the item is removed. But I’m sure they’re solvable problems. So the code is…

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

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

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

  props: {
    pathPrefix: {
      type: String,
      default: "",
    },
  },

  emits: ["uploaded", "failed", "removed"],

  injectPlugin({ props, emit, helpers }) {
    // can call any other composables here
    // as this function will run in the component's setup()
    const storage = ref(firebase.storage().ref());
    const activeTasks = ref([]);
    // [ 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() {
      if (props.disable || !helpers.queuedFiles.value.length) {
        return;
      }
      helpers.queuedFiles.value.forEach(async (file) => {
        await __uploadSingleFile(file);
      });
    }
    function __uploadSingleFile(file) {
      let pathPrefix = props.pathPrefix || "";
      // const fileRef = storage.value.child(pathPrefix + file.name)
      const fileRef = storage.value.child(`${pathPrefix}/${file.name}`);
      helpers.updateFileStatus(file, "uploading", 0);
      const uploadTask = fileRef.put(file);
      activeTasks.value.push(uploadTask);
      // Listen for state changes, errors, and completion of the upload.
      uploadTask.on(
        firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed'
        (snapshot) => {
          // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
          if (file.__status !== "failed") {
            const loaded = Math.min(
              snapshot.totalBytes,
              snapshot.bytesTransferred
            );
            helpers.uploadedSize.value += loaded - file.__uploaded;

            helpers.updateFileStatus(file, "uploading", loaded);
          }
        },
        (error) => {
          // A full list of error codes is available at
          // https://firebase.google.com/docs/storage/web/handle-errors
          helpers.queuedFiles.value.push(file);
          helpers.updateFileStatus(file, "failed");
          emit("failed", { file, error });
          helpers.uploadedSize.value -= file.__uploaded;
          activeTasks.value = activeTasks.value.filter((t) => t !== uploadTask);
        },
        () => {
          // Upload completed successfully, now we can get the download URL
          uploadTask.snapshot.ref
            .getDownloadURL()
            .then((downloadURL) => {
              const fullPath = uploadTask.snapshot.ref.fullPath;
              const fileName = uploadTask.snapshot.ref.name;
              helpers.uploadedFiles.value.push(file);
              helpers.updateFileStatus(file, "uploaded");
              let uploadTime = _.round(new Date().getTime() / 1000);
              console.log("TCL: __uploadSingleFile -> uploadTime", uploadTime);
              let [fileSize, fileType] = [file.size, file.type];
              console.log(
                downloadURL,
                fileName,
                fileSize,
                fileType,
                fullPath,
                uploadTime
              );
              emit("uploaded", {
                downloadURL,
                fileName,
                fileSize,
                fileType,
                fullPath,
                uploadTime,
              });
              helpers.uploadedSize.value += file.size - file.__uploaded;
              // helpers.uploadedSize.value = 0;
            })
            .catch((error) => {
              emit("failed", { file, error });
            });
          activeTasks.value = activeTasks.value.filter((t) => t !== uploadTask);
        }
      );
    }

    function removeFile(file) {
      if (props.disable) {
        return;
      }

      if (file.__status === "uploaded") {
        helpers.uploadedFiles.value = helpers.uploadedFiles.value.filter(
          (f) => f.name !== file.name
        );

        // As of Quasar v2 beta7 uploadSize cannot be taken out of helpers/state. So removeFile won't be able to change blue header the label on top.
        helpers.uploadSize.value -= file.__uploaded;
      } else if (file.__status === "uploading") {
        file.__abort();
      } else {
        helper.uploadSize.value -= file.size;
      }

      helpers.files.value = helpers.files.value.filter((f) => {
        if (f.name !== file.name) {
          return true;
        }

        f._img !== void 0 && window.URL.revokeObjectURL(f._img.src);

        return false;
      });
      helpers.queuedFiles.value = helpers.queuedFiles.value.filter(
        (f) => f.name !== file.name
      );
      emit("removed", [file]);
    }

    return {
      isUploading,
      isBusy,

      abort,
      upload,
    };
  },
});

It gives the following warning [Vue warn]: Component emitted event "uploaded" but it is neither declared in the emits option nor as an "onUploaded" prop. I don’t know why. But it’s a fully functional Firebase Uploader for Quasar v2 now.

Edit: emits: [“uploaded”, “failed”, “removed”],

I made a discovery today. I will be working on it over the next days. It’s the uploader-core which exposes all the functions and references. So I can begin working with the createUploaderComponent Hurray.

Edit: Ok ok this thing goes deeper than I’ve expected. There’s this xhr-uploader-plugin which exposes how things are running. I’ve finally found how the heck the queuedFiles can be called in the createUploaderComponent: helpers.queuedFiles.value. So I’ll keep running my expedition from there.

this is not properly working, sorry. the computed properties are blocking the process. The uploaded chunks are not reflected as percentages. Pfff.