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/



  • Nice! Love it!



  • Excellent



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

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



  • @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



  • @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 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.”



  • 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
      }


  • @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>


  • @metalsadman
    and called it

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


  • @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


Log in to reply