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()
            })
        }
      })
    },

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}`))
      }
    },

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.

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:

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…

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

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?

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.

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()
            })
        }
      })
    },

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}`))
      }
    },

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?

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

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?

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.