No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. menachem
    M
    • Profile
    • Following 0
    • Followers 0
    • Topics 1
    • Posts 1
    • Best 1
    • Groups 0

    menachem

    @menachem

    5
    Reputation
    5
    Profile views
    1
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    menachem Follow

    Best posts made by menachem

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

      posted in Framework
      M
      menachem

    Latest posts made by menachem

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

      posted in Framework
      M
      menachem