question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Types of QUploader instance properties are missing

See original GitHub issue

What happened?

The QUploader scoped param is not fully typescript-ready. I used the official example for QUploader custom header and although some properties are already properly typed, others from the example are missing, notably:

  • files
  • queuedFiles
  • uploadedFiles
  • isUploading
  • canAddFiles
  • canUpload
  • uploadSizeLabel
  • uploadProgressLabel

Screenshot 2022-04-20 at 16 39 17

What did you expect to happen?

The official custom header example (and others) should work as-is with TypeScript. All the properties available on scoped params should be properly typed.

Reproduction URL

https://github.com/paya-cz/quasar-scoped-param-typescript-issue

How to reproduce?

  1. Clone the repo.
  2. Look into src/components/ExampleComponent.vue using Visual Studio Code
  3. Observe TypeScript errors in the <template> section

Notes:

  • I didn’t use Codepen / jsFiddle because they are not setup with TypeScript
  • The project is just standard npm init quasar with Quasar v2, TypeScript, CLI+Vite
  • There is just one single commit beyond npm init quasar that you can inspect to see the diff, but it is just a copy/paste of the QUploader example

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

TypeScript Support

Platforms/Browsers

No response

Quasar info output

No response

Relevant log output

No response

Additional context

No response

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
paperisquecommented, Sep 15, 2022

sorry, yes I meant “isUploading”. I am waiting 2.8.3 for now I’m using:


interface LocalUploader extends QUploader {
       isUploading: () => boolean;
}
...

const isUploading = (scope: QUploader) => {
      return (scope as LocalUploader).isUploading;
};


0reactions
yusufkandemircommented, Sep 15, 2022

For anyone else that comes across this: Volar doesn’t automatically pick up changes to node_modules. So, make sure to restart VS Code or just the Volar extension after installing/upgrading dependencies. With 2.8.2, you will still get an error regarding isUploading, but everything else will work properly. Starting from v2.8.3(not released yet), everything should work fine.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Q-Uploader with Composition API - Quasar forum
For example I get Uncaught TypeError: Cannot read property 'files' of undefined error with this code. But where do the this.files , this....
Read more >
Is it possible to give name to Quasar Uploader in <form>
When the Uploader is rendered it does not have the attribute name. From the example above you have this input: <input tabindex="-1" type="file" ......
Read more >
Uploader - Quasar Framework
The QUploader Vue component is a way for the user to upload files to a backend server. ... use the batch property (second...
Read more >
Type error - Missing 200+ properties : r/typescript - Reddit
Type error: Type '{ children: Element; className: string; closeButton: true; }' is missing the following properties from type…
Read more >
Quasar 0.17 - Features and Fixes - Steemit
The "meta" properties can be dynamic. For example, this is how you can bind to the Vue scope with them. Think of them...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found