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.

Hi there.

I am trying to style a table which contains another table in the row expansion. Seems to work so far.

I am trying to get rid of the bottom border in the inner table and I can do it alright with classes: ‘no-border’ in the columns objects.

But I cannot find a way to access the “checkbox column” and apply the no-border to this column too. I think I have tried all classes that I could find on the q-table object, with no success.

Thanks syflex. That’s it, it works perfectly now.

I got the q-side-link from here: https://v0-14.quasar-framework.org/components/layout-side-links.html
but did not notice that it refers to an older version. The new syntax seems much more straight-forward btw.

Thanks
again.

Hi, I am a beginner with vue and quasar and I am working through the documentation and building a mock app.

I am trying to use q-side-link to route to different pages, but the menu item becomes non clickable. I have the same problem with this fiddle https://jsfiddle.net/ypL7nLrh/30/, so I am really at a loss.

Suggestions anyone? Thanks.

<q-layout-drawer
          v-model="drawerState"
          :content-class="$q.theme === 'mat' ? 'bg-grey-3' : null"
        >
          <q-list no-border link inset-delimiter dense>
            <q-list-header>Menu</q-list-header>
     
            <q-side-link item to="/foo" exact>
                <q-item>
                    <q-item-main label="Foo router"> </q-item-main>
                </q-item>
            </q-side-link>
          </q-list>
        </q-layout-drawer>