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. bruno.ronchetti
    B
    • Profile
    • Following 0
    • Followers 0
    • Topics 7
    • Posts 14
    • Best 3
    • Groups 0

    bruno.ronchetti

    @bruno.ronchetti

    4
    Reputation
    60
    Profile views
    14
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    bruno.ronchetti Follow

    Best posts made by bruno.ronchetti

    • RE: Q-uploader with factory function

      Thanks a lot @metalsadman I got it working now. This promise within a promise thing got me confused.

      Should anyone be interested in the future, this is what works for me:

      html

                  v-if="document.ShowUploadDialog"
                  ref="uploader"
                  :multiple="false"
                  :factory="uploadFile"
                  @added="added"
                  @finish="uploaded"
                  @uploaded="uploaded"
                  url="http://localhost:4444/upload"
                  color="white"
                  text-color="grey-5"
                  style="margin-top:10px; margin-left: 340px; max-width: 250px"
                >
      

      script

          uploadFile (files) {
            return new Promise((resolve, reject) => {
              var myUploader = this.$refs.uploader[0]
              var file = files[0]
              var fileSrc
              var fileData
      
              var reader = new FileReader()
              reader.readAsDataURL(file)
              reader.onerror = err => console.error(`Failed to read file: ${err}`)
              reader.onload = function () {
                fileSrc = reader.result
                fileData = fileSrc.substr(fileSrc.indexOf(',') + 1)
                stitchClient.callFunction('uploadImageToS3', [fileData, 'elever-erp-document-store', file.name, file.type])
                  .then(result => {
                    alert('fatto')
                    console.log(file)
                    myUploader.removeFile(file)
                    resolve(files)
                  })
                  .catch(err => {
                    console.error(`Failed to upload file: ${err}`)
                    reject()
                  })
              }
            })
          },
      
      posted in Help
      B
      bruno.ronchetti
    • Q-uploader with factory function

      I cannot get q-uploader to trigger the uploaded event after doing a factory-based upload.

      I have read on the forum that the promise-based factory function needs to return “the file” in order complete, but I do not understand what this file object needs to look like.

      I use stitch (the mongodb serverless backend) to upload the file to AWS S3 and the upload works just fine.

      But I fail to get the notification that the uplaod has been completed.

      Here is my code:

      html

        <q-uploader square flat bordered no-thumbnails
                  v-if="document.ShowUploadDialog"
                  ref="uploader"
                  :multiple="false"
                  :factory="uploadFile"
                  @uploaded="uploaded"
                  url="http://localhost:4444/upload"
                  color="white"
                  text-color="grey-5"
                  style="margin-top:10px; margin-left: 340px; max-width: 250px"
                >
      

      script

          uploaded () {
            alert('uploaded')
          },
      
          uploadFile (files) {
            var myUploader = this.$refs.uploader[0]
            var file = files[0]
            var fileSrc
            var fileData
      
            var reader = new FileReader()
            reader.readAsDataURL(file)
            reader.onerror = err => console.error(`Failed to read file: ${err}`)
            reader.onload = function () {
              fileSrc = reader.result
              fileData = fileSrc.substr(fileSrc.indexOf(',') + 1)
              stitchClient.callFunction('uploadImageToS3', [fileData, 'elever-erp-document-store', file.name, file.type])
                .then(result => {
                  alert('fatto')
                  myUploader.removeFile(file)
                  return reader /* what do I need to return? */
                })
                .catch(err => console.error(`Failed to upload file: ${err}`))
            }
          },
      
      posted in Help
      B
      bruno.ronchetti
    • RE: Q-uploader with factory function

      One step further I have incurred in another problem.
      If I want my @uploaded event triggered, I need to resolve the promise with a “file” object. This seems to require an “url” parameter with the url actually returning a 200 code to trigger the @uploaded event.
      This seems to me to be pretty useless, since the actual upload was executed by the api (stitchclient.callfunction in my case).
      I have solved this with a workaround, ie pointing the url to a dummy server which returns the 200 code. But I wonder if this is the intended way to solve this. Maybe I have an edge case, but uploading through apis should not be that uncommon.

      posted in Help
      B
      bruno.ronchetti

    Latest posts made by bruno.ronchetti

    • Inject html into q-carousel-slide

      Hi there.

      I would like to use q-carousel slides as background for data collection (as in: data collection during a powerpoint presentation).

      This works just fine:

      <q-carousel-slide name="second" img-src="https://cdn.quasar.dev/img/parallax1.jpg">
        <template slot="default">
          <div>
            <p class="text-h5 q-px-md q-pt-none text-h5 bg-white">This content comes from the parent!</p>
            <p class="text-h5 q-px-md q-pt-none text-h5 bg-white">I can bind to data in the parent scope: {{slide}}</p>
            <p class="text-h5 q-px-md q-pt-none text-h5 bg-white">And can use quasar components</p>
            <q-input class="q-px-md q-pt-none text-h5 bg-white" bottom-slots v-model="currentObject.Name" label="Nome" style="max-width: 300px;"/>
          </div>
        </template>
      </q-carousel-slide>
      

      Gives this:

      faf282bf-ce27-4409-8608-4a0901695da4-image.png

      I would now like to provide the html dynamically, a different html for each slide, from an external source, but have not found a way to do this. Looking for ideas…

      posted in Help
      B
      bruno.ronchetti
    • RE: QPdfViewer Path to file with "type=html5" is different from "type=pdfjs"

      Ok, thanks. I am looking forward to new releases.

      posted in [v1] App Extensions
      B
      bruno.ronchetti
    • QPdfViewer Path to file with "type=html5" is different from "type=pdfjs"

      QPdfViewer is great component. I use it to display .pdfs that are generated on the backend using puppeteer from a mix of user and database data.

      I have not found a way to easily configure the path where QPdfViewer is looking for the file. Am I stuck with the “…src/statics/pdfjs/web/” default?

      Also: if put my files in the default folder “…src/statics/pdfjs/web/” I am able to read them using “type=pdfjs” but not using “type=html5”. Is this by design or am I missing something?

      posted in [v1] App Extensions
      B
      bruno.ronchetti
    • RE: Q-uploader with factory function

      One step further I have incurred in another problem.
      If I want my @uploaded event triggered, I need to resolve the promise with a “file” object. This seems to require an “url” parameter with the url actually returning a 200 code to trigger the @uploaded event.
      This seems to me to be pretty useless, since the actual upload was executed by the api (stitchclient.callfunction in my case).
      I have solved this with a workaround, ie pointing the url to a dummy server which returns the 200 code. But I wonder if this is the intended way to solve this. Maybe I have an edge case, but uploading through apis should not be that uncommon.

      posted in Help
      B
      bruno.ronchetti
    • RE: Q-uploader with factory function

      Thanks a lot @metalsadman I got it working now. This promise within a promise thing got me confused.

      Should anyone be interested in the future, this is what works for me:

      html

                  v-if="document.ShowUploadDialog"
                  ref="uploader"
                  :multiple="false"
                  :factory="uploadFile"
                  @added="added"
                  @finish="uploaded"
                  @uploaded="uploaded"
                  url="http://localhost:4444/upload"
                  color="white"
                  text-color="grey-5"
                  style="margin-top:10px; margin-left: 340px; max-width: 250px"
                >
      

      script

          uploadFile (files) {
            return new Promise((resolve, reject) => {
              var myUploader = this.$refs.uploader[0]
              var file = files[0]
              var fileSrc
              var fileData
      
              var reader = new FileReader()
              reader.readAsDataURL(file)
              reader.onerror = err => console.error(`Failed to read file: ${err}`)
              reader.onload = function () {
                fileSrc = reader.result
                fileData = fileSrc.substr(fileSrc.indexOf(',') + 1)
                stitchClient.callFunction('uploadImageToS3', [fileData, 'elever-erp-document-store', file.name, file.type])
                  .then(result => {
                    alert('fatto')
                    console.log(file)
                    myUploader.removeFile(file)
                    resolve(files)
                  })
                  .catch(err => {
                    console.error(`Failed to upload file: ${err}`)
                    reject()
                  })
              }
            })
          },
      
      posted in Help
      B
      bruno.ronchetti
    • Q-uploader with factory function

      I cannot get q-uploader to trigger the uploaded event after doing a factory-based upload.

      I have read on the forum that the promise-based factory function needs to return “the file” in order complete, but I do not understand what this file object needs to look like.

      I use stitch (the mongodb serverless backend) to upload the file to AWS S3 and the upload works just fine.

      But I fail to get the notification that the uplaod has been completed.

      Here is my code:

      html

        <q-uploader square flat bordered no-thumbnails
                  v-if="document.ShowUploadDialog"
                  ref="uploader"
                  :multiple="false"
                  :factory="uploadFile"
                  @uploaded="uploaded"
                  url="http://localhost:4444/upload"
                  color="white"
                  text-color="grey-5"
                  style="margin-top:10px; margin-left: 340px; max-width: 250px"
                >
      

      script

          uploaded () {
            alert('uploaded')
          },
      
          uploadFile (files) {
            var myUploader = this.$refs.uploader[0]
            var file = files[0]
            var fileSrc
            var fileData
      
            var reader = new FileReader()
            reader.readAsDataURL(file)
            reader.onerror = err => console.error(`Failed to read file: ${err}`)
            reader.onload = function () {
              fileSrc = reader.result
              fileData = fileSrc.substr(fileSrc.indexOf(',') + 1)
              stitchClient.callFunction('uploadImageToS3', [fileData, 'elever-erp-document-store', file.name, file.type])
                .then(result => {
                  alert('fatto')
                  myUploader.removeFile(file)
                  return reader /* what do I need to return? */
                })
                .catch(err => console.error(`Failed to upload file: ${err}`))
            }
          },
      
      posted in Help
      B
      bruno.ronchetti
    • q-editor with editable tokens

      Hello, I m trying to put “editable” tokens into a q-editor, the idea being that the user uses the tokens as some sort of placeholder for future substitutions.

      The token needs to be editable (done), removable (built-in) and i need to get a hook when the user is done editing.

      My code looks like this:

      addToken (name) {
        const edit = this.$refs.editor
        edit.caret.restore()
        edit.runCmd('insertHTML', `&nbsp;<div class="editor_token row inline items-center" >&nbsp;<input  contenteditable="true" onblur="blur" onclick="click"  >${name}</input>&nbsp;<i class="q-icon material-icons cursor-pointer" onclick="this.parentNode.parentNode.removeChild(this.parentNode)">close</i></div>&nbsp;`)
        edit.focus()
      },
      
          blur () {
            console.log('BLURRED')
          },
      
          click () {
            console.log('CLICKED')
          },
      

      The events are triggered correctly, but the method-names are not resolved. I have tried all sort of things, without joy.

      onclick="this.click"
      onclick="this._vm.click"
      onclick="this.$q.click"
      onclick="this.parentNode.parentNode.click"
      ...
      

      What is the correct way to do it?

      posted in Help
      B
      bruno.ronchetti
    • RE: v1 QSelect cant change value with object options

      Thanks for clarifying. I have just checked the browsers:

      • on OSX Chrome I get the selection on first click - version 74.0.3729.131
      • on OSX Safari I need to click twice - version 12.1 (14607.1.40.1.4)

      My q-select is pretty basic:
      <q-select dense bottom-slots stack-label v-model="myDoc.Model" label="Model" :options="modelOptions" class="q-mt-xl" style="max-width: 600px" />

      posted in Framework
      B
      bruno.ronchetti
    • RE: v1 QSelect cant change value with object options

      Thanks everyone. I have upgraded to beta 22 and it works now.

      I still need to click twice to get the selection (first click highlights, second selects) - is this the expected behavior?

      posted in Framework
      B
      bruno.ronchetti
    • RE: v1 QSelect cant change value with object options

      Hi everyone.

      I have been struggling with the simplest q-select for a couple of hours now, trying to select an object form an Array (I am on v.1-beta 15 - tried both Safari and Chrome.

      The example in the docs works in the docs page, but when I put it my project it stops working, although my page contains nothing but the code from the docs. Also, and this is really puzzling, the above codepen by Scott also does not work for me.

      Really scratching my head here.

      posted in Framework
      B
      bruno.ronchetti