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. gs86
    3. Best
    G
    • Profile
    • Following 0
    • Followers 1
    • Topics 5
    • Posts 16
    • Best 3
    • Groups 0

    Best posts made by gs86

    • RE: Stripe integration with quasar q-field

      This worked perfect, have used in one of my projects now.

      Thanks a lot.

      posted in Show & Tell
      G
      gs86
    • RE: q-file-picker component with express js help

      I actually fixed this back then, sorry i did not posted here let me post now so it may help someone need this.

      <template>
        <div>
          <q-file
            :value="files"
            @input="updateFiles"
            :label="label"
            outlined
            multiple
            :clearable="!isUploading"
          >
            <template v-slot:file="{ index, file }">
              <q-chip
                class="full-width q-my-xs"
                :removable="isUploading && uploadProgress[index].percent < 1"
                square
                @remove="cancelFile(index)"
              >
                <q-linear-progress
                  class="absolute-full full-height"
                  :value="uploadProgress[index].percent"
                  :color="uploadProgress[index].color"
                  track-color="grey-2"
                />
      
                <q-avatar>
                  <q-icon :name="uploadProgress[index].icon" />
                </q-avatar>
      
                <div class="ellipsis relative-position">
                  {{ file.name }}
                </div>
      
                <q-tooltip>
                  {{ file.name }}
                </q-tooltip>
              </q-chip>
            </template>
      
            <template v-slot:after v-if="canUpload">
              <q-btn
                color="primary"
                dense
                icon="cloud_upload"
                round
                @click="upload"
                :disable="!canUpload"
                :loading="isUploading"
              />
            </template>
          </q-file>
        </div>
        <!--
          <div class="col-4 q-pa-sm">
            <q-uploader
              url="http://localhost:30035/uploads"
              label="Upload files"
              color="purple"
              square
              flat
              bordered
            />
          </div>
        </div>
        -->
      </template>
      
      <script>
      import api from "@/api";
      import axios from "axios";
      
      export default {
        name: "Uploader",
        props: {
          type: {
            type: String,
            default: ""
          }
        },
        data() {
          return {
            files: null,
            uploadProgress: [],
            uploading: null
          };
        },
        computed: {
          label() {
            return "Upload your " + this.type;
          },
          isUploading() {
            return this.uploading !== null;
          },
      
          canUpload() {
            return this.files !== null;
          }
        },
      
        methods: {
          cancelFile(index) {
            this.uploadProgress[index] = {
              ...this.uploadProgress[index],
              error: true,
              color: "orange-2"
            };
          },
      
          async updateFiles(files) {
            this.files = files;
      
            if (this.files.length) {
              let objFile = this.files[0];
              if (this.type == "Video") {
                if (objFile.type.indexOf("video/") !== 0) {
                  this.$q.notify({
                    color: "red-5",
                    textColor: "white",
                    icon: "warning",
                    message: "Please select a valid VIDEO to upload."
                  });
      
                  return false;
                  event.preventDefault();
                }
              } else {
                if (objFile.type.indexOf("image/") !== 0) {
                  this.$q.notify({
                    color: "red-5",
                    textColor: "white",
                    icon: "warning",
                    message: "Please select a valid IMAGE to upload."
                  });
                  return false;
                  event.preventDefault();
                }
              }
      
              this.uploadProgress = (files || []).map(file => ({
                error: false,
                color: "green-2",
                percent: 0,
                icon:
                  file.type.indexOf("video/") === 0
                    ? "movie"
                    : file.type.indexOf("image/") === 0
                    ? "photo"
                    : file.type.indexOf("audio/") === 0
                    ? "audiotrack"
                    : "insert_drive_file"
              }));
            }
          },
          upload() {
            clearTimeout(this.uploading);
      
            const config = {
              headers: {
                "Content-Type": "multipart/form-data"
              },
              onUploadProgress: progressEvent => {
                console.log(progressEvent.loaded);
                this.uploadProgress[0].error = false;
                this.uploadProgress[0].color = "green-2";
                var percent = progressEvent.loaded / progressEvent.total;
                this.uploadProgress[0].percent = percent;
                console.log(
                  "Progress:",
                  progressEvent.loaded,
                  "/",
                  progressEvent.total,
                  percent + "%"
                );
              }
            };
      
            var file = this.files[0];
            //var fileName = file.name;
            var strType = this.type;
      
            var formData = new FormData();
            formData.append("file", file);
            // You should have a server side REST API
      
            var _this = this;
      
            axios
              .post(api.getAPIBaseUrl() + "/uploads", formData, config)
              .then(function(objResponse) {
                objResponse.data.strType = strType;
                console.log("SUCCESS!!", objResponse.data);
                _this.$emit("uploaded", objResponse.data);
              })
              .catch(function(err) {
                console.log("FAILURE!!", err);
                _this.$emit("uploaded", err);
              });
          }
      
          /*
          __updateUploadProgress() {
            let done = true;
      
            this.uploadProgress = this.uploadProgress.map(progress => {
              if (progress.percent === 1 || progress.error === true) {
                return progress;
              }
      
              const percent = Math.min(1, progress.percent + Math.random() / 10);
              const error = percent < 1 && Math.random() > 0.95;
      
              if (error === false && percent < 1 && done === true) {
                done = false;
              }
      
              return {
                ...progress,
                error,
                color: error === true ? "red-2" : "green-2",
                percent
              };
            });
      
            this.uploading =
              done !== true ? setTimeout(this.__updateUploadProgress, 300) : null;
          }
          */
        },
      
        beforeDestroy() {
          clearTimeout(this.uploading);
        }
      };
      </script>
      
      

      in express

      
        app.post('/uploads', function (req, res) {
      
      
          if (!req.files || Object.keys(req.files).length === 0) {
            return res.status(400).send('No files were uploaded.');
          }
      
          // The name of the input field (i.e. "objFile") is used to retrieve the uploaded file
          let objFile = req.files[Object.keys(req.files)[0]]; //returns 'someVal'
      
          objFile.name = objFile.md5 + "." + mime.getExtension(objFile.mimetype);
      
          console.log("objFile is ", objFile);
      
          // Use the mv() method to place the file somewhere on your server
          objFile.mv(__dirname + '/uploads/' + objFile.name, function (err) {
            if (err) {
              res.status(500).json({ blnOK: false, msg: err.message });
            }
      
            var objResponse = {};
            objResponse.blnOK = true;
            objResponse.objFile = objFile;
            res.json(objResponse);
          });
        });
      

      please note i am using “express-fileupload” for file uploading

      posted in Help
      G
      gs86
    • RE: How to validate q-radio for required.

      Here is how i did it maybe it helps someone in future

      component

      <template>
        <div class="q-gutter-sm">
          <q-field
            ref="radioGroup"
            :value="radioGroup"
            hide-bottom-space
            borderless
            :rules="rules"
          >
            <q-radio
              v-model="radioGroup"
              v-on:input="emit"
              v-for="radioOption in radioOptions"
              :key="radioOption.id"
              :val="radioOption.id"
              :label="radioOption.name"
            />
          </q-field>
        </div>
      </template>
      
      <script>
      export default {
        name: "base-radio",
        created() {
          this.radioGroup = this.value;
        },
        data() {
          return { radioGroup: "" };
        },
        props: {
          radioOptions: {
            type: Array,
            required: true
          },
          value: { required: true },
          isRequired: { type: Boolean, default: false },
          tooltip: {
            type: String
          }
        },
        computed: {
          rules() {
            return this.isRequired ? this.$utils.requiredRule : [];
          }
        },
        methods: {
          emit(value) {
            console.log("emitting", value);
            this.$emit("input", value);
          }
        }
      };
      </script>
      
      <style lang="scss" scoped></style>
      
      

      call to component

        <base-radio
                                isRequired
                                v-model="objModel.title"
                                :radioOptions="arrTitle"
                              ></base-radio>
      
      posted in Help
      G
      gs86