In a project, I’m using this lib https://fengyuanchen.github.io/compressorjs/ ; it allows to resize/compress.
Used with Uploader component.

Though, to use it before it’s being uploaded and to show the final size properly, you need to create your own component based on QUploaderBase (purpose is to overwrite __add_files method, so you can call the parent method once you resize/compressed the files). I don’t think there is a better way, but it works fine for me.

As side-note, you can also do it without CSS – that’s something you could achieve with slots: https://quasar.dev/vue-components/uploader#Slots by customizing the header.
More verbose though, but I guess cleaner in a way.

Not a pro, but am I wrong or you are not using SSR mode? Dynamically changing the meta makes sense only with SSR.
You said you’re using PWA, you might need to check the doc about running SSR + PWA.