A working QFirebaseUploader component

nothingismagick

Excellent

ajanyhc

Perhaps an omission?
snapshot => (this.uploadedSize += snapshot.bytesTransferred)
should be modified as

snapshot => {
this.uploadSize = snapshot.totalBytes;
this.uploadedSize = snapshot.bytesTransferred;
},

sreeraj mp

@menachem said in A working QFirebaseUploader component:

Re: Q-Uploader with firebase storage

Based on the current version of the docs and https://gist.github.com/razbakov/378caedba3f24e3d8336442182528719

// QFirebaseUploader.js
import { QUploaderBase } from "quasar";

// src/boot/firebase.js:
// export const storage = firebase.initializeApp(config).storage();
import { storage } from "boot/firebase";

export default {
  name: "QFirebaseUploader",

  mixins: [QUploaderBase],

  props: {
    path: String
  },

  data() {
    return {
      uploading: false,
      uploadTasks: []
    };
  },

  computed: {
    // [REQUIRED]
    // we're working on uploading files
    isUploading() {
      return this.uploading;
    },

    // [optional]
    // shows overlay on top of the
    // uploader signaling it's waiting
    // on something (blocks all controls)
    isBusy() {
      return this.uploading;
    }
  },

  methods: {
    // [REQUIRED]
    // abort and clean up any process
    // that is in progress
    abort() {
      this.uploadTasks.forEach(uploadTask => {
        uploadTask.cancel();
      });

      this.uploading = false;
    },

    // [REQUIRED]
    upload() {
      if (this.canUpload === false) {
        return;
      }

      this.uploading = true;

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

        this.uploadTasks.push(uploadTask);

        uploadTask.on(
          "state_changed",
          snapshot => (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 &&
              (this.uploading = false);
          }
        );
      });
    }
  }
};

Used like QUploader with a path prop (instead of url), which should be a string that ends with a slash. For example: files/

@menachem can u share its usage in template. It would be helpful.thank you

metalsadman

@sreeraj-mp if you followed his comments in the snippet he named the file QFirebaseUploader.js. then just import it in your vue component.

// SomePage.vue
<template>
  ....
  <q-firebase-uploader ... />
  ...
</template>
<script>
import QFirebaseUploader from 'somepath/QFirebaseUploader.js'
export default {
  components: {
    QFirebaseUploader
  }
...

sreeraj mp

@metalsadman said in A working QFirebaseUploader component:

@sreeraj-mp if you followed his comments in the snippet he named the file QFirebaseUploader.js. then just import it in your vue component.
// SomePage.vue
<template>
  ....
  <q-firebase-uploader ... />
  ...
</template>
<script>
import QFirebaseUploader from 'somepath/QFirebaseUploader.js'
export default {
  components: {
    QFirebaseUploader
  }
...

@metalsadman i am getting error that q-firebase-uploader is not register

“webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:620 [Vue warn]: Unknown custom element: <q-firebase-uploader> - did you register the component correctly? For recursive components, make sure to provide the “name” option.”

metalsadman

try with other name my-uploader or something. also show how did you use it.

import MyUploader from 'somepath/QFirebaseUploader.js'
export default {
  components: {
    MyUploader
  }

sreeraj mp

@metalsadman ```
i used the script in vue file as component

  <div>My component</div>
</template>

<script>
import { QUploaderBase } from "quasar";
import { firebaseCs } from "boot/firebase";
export default {
  name: "QFirebaseUploader",

  mixins: [QUploaderBase],

  props: {
    path: String
  },
   data() {
    return {
      uploading: false,
      uploadTasks: []
    };
  },

  computed: {
    // [REQUIRED]
    // we're working on uploading files
    isUploading() {
      return this.uploading;
    },

    // [optional]
    // shows overlay on top of the
    // uploader signaling it's waiting
    // on something (blocks all controls)
    isBusy() {
      return this.uploading;
    }
  },

  methods: {
    // [REQUIRED]
    // abort and clean up any process
    // that is in progress
    abort() {
      this.uploadTasks.forEach(uploadTask => {
        uploadTask.cancel();
      });

      this.uploading = false;
    },

    // [REQUIRED]
    upload() {
      if (this.canUpload === false) {
        return;
      }

      this.uploading = 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);

        this.uploadTasks.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 &&
              (this.uploading = false);
          }
        );
      });
    }
  }
}
</script>

sreeraj mp

@metalsadman
and called it

<template>  
  <q-firebase-uploader 
   label="Auto Uploader"
      auto-upload/>
</template>
<script>
import QFirebaseUploader from 'components/QFirebaseUploader'
export default {
  components: {
    QFirebaseUploader
  }
  }

metalsadman

@sreeraj-mp said in A working QFirebaseUploader component:

@metalsadman ```
i used the script in vue file as component

  <div>My component</div>
</template>

<script>
import { QUploaderBase } from "quasar";
import { firebaseCs } from "boot/firebase";
export default {
  name: "QFirebaseUploader",

  mixins: [QUploaderBase],

  props: {
    path: String
  },
   data() {
    return {
      uploading: false,
      uploadTasks: []
    };
  },

  computed: {
    // [REQUIRED]
    // we're working on uploading files
    isUploading() {
      return this.uploading;
    },

    // [optional]
    // shows overlay on top of the
    // uploader signaling it's waiting
    // on something (blocks all controls)
    isBusy() {
      return this.uploading;
    }
  },

  methods: {
    // [REQUIRED]
    // abort and clean up any process
    // that is in progress
    abort() {
      this.uploadTasks.forEach(uploadTask => {
        uploadTask.cancel();
      });

      this.uploading = false;
    },

    // [REQUIRED]
    upload() {
      if (this.canUpload === false) {
        return;
      }

      this.uploading = 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);

        this.uploadTasks.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 &&
              (this.uploading = false);
          }
        );
      });
    }
  }
}
</script>

are you sure this is correct? why you have template in there. follow the OP’s guide. this component should be a js file. https://forum.quasar-framework.org/topic/3956/a-working-qfirebaseuploader-component?_=1589032074290

pazarbasifatih

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

No More Posting New Topics!

A working QFirebaseUploader component