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

    Topics created by gs86

    • G

      How to validate q-radio for required.
      Help • • gs86

      3
      0
      Votes
      3
      Posts
      1750
      Views

      G

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

      q-file-picker component with express js help
      Help • • gs86

      3
      0
      Votes
      3
      Posts
      2726
      Views

      G

      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

    • G

      importing components in standalone configuration not working..
      Help • • gs86

      2
      0
      Votes
      2
      Posts
      289
      Views

      G

      i have now figured out you need to import like this Quasar.utils.exportFile

      import { exportFile } from Quasar.utils.exportFile;

      might help someone who have this issue…

    • G

      Shaka player
      Help • • gs86

      2
      0
      Votes
      2
      Posts
      191
      Views

      G

      Nevermind, i have figured out and developed my own component in case someone needs below is the code…

      Install: npm i shaka-player

      <template> <video ref="shakaVideo" :width="width" :height="height" poster="//shaka-player-demo.appspot.com/assets/poster.jpg" controls ></video> </template> <script> import * as shaka from "shaka-player"; export default { name: "ShakaPlayer", props: { manifestUri: { type: String }, width: { type: String, default: "200px" }, height: { type: String, default: "100%" } }, data() { return {}; }, mounted() { // Install built-in polyfills to patch browser incompatibilities. shaka.polyfill.installAll(); // Check to see if the browser supports the basic APIs Shaka needs. if (shaka.Player.isBrowserSupported()) { // Everything looks good! // Create a Player instance. var video = this.$refs.shakaVideo; var player = new shaka.Player(video); // Attach player to the window to make it easy to access in the JS console. window.player = player; // Listen for error events. player.addEventListener("error", onErrorEvent); // Try to load a manifest. // This is an asynchronous process. player .load(this.manifestUri) .then(function() { // This runs if the asynchronous load is successful. console.log("The video has now been loaded!"); }) .catch(onError); // onError is executed if the asynchronous load fails. } else { // This browser does not have the minimum set of APIs we need. alert("Browser not supported!"); } function onErrorEvent(event) { // Extract the shaka.util.Error object from the event. onError(event.detail); } function onError(error) { // Log the error. console.log("Error code: ", error.code, ", object: ", error); } } }; </script>
    • G

      Live reload quasar cordova app
      Help • • gs86

      4
      0
      Votes
      4
      Posts
      294
      Views

      G

      i have found the answer for my question i think i needed this command

      quasar dev -m cordova -T android

      Thanks for your help…