I haven’t used q-uploader, but when I tried this out, this is what I did:

In my template:
<q-uploader multiple :url=“url” @add=“uploadAdded”/>

Then in my Vue code:
methods: {
uploadAdded (file) {
console.log(‘file.length’, file.length)
}
}

I choose 2 text files from my computer, and I saw “file.length 2” appear in my console.

Do you see any errors when you run your code?

Did you add this component into the components area of the ‘quasar.conf.js’ file?

Hey, I was able to find out what was missing and finally got electron-builder to work with my windows icon.ico file, with no jagged results!

The deal was that some add’l config was needed in the builder object of quasar.conf.js. In electron-builder’s documentation, I went to the Windows target page: https://www.electron.build/configuration/win#WindowsConfiguration-target.

From there I found that there is an icon property. Include the ‘win’ object, and include the nested ‘icon’ object with the value being set to the path of your windows ICO file.

icon: ‘src-electron/icons/icon.ico’

My updated quasar.conf.js file (the electron section of it) looks like this now:

electron: {
  bundler: 'builder',
  extendWebpack (cfg) {
    // do something with Electron process Webpack cfg
  },
  builder: {
    // https://www.electron.build/configuration/configuration
    appId: 'com.etrac-mss.etrac',
    win: {
      icon: 'src-electron/icons/icon.ico'
    }
  }
}

I ran the build, and the installer file looked good. Then I ran the installer and the app icon looks good, too. Phew! Glad to find it’s something simple… (simple after it’s discovered, that is).

I’m wondering if this is something that should get added to Quasar’s documentation for bundling with electron-builder (hmmm, by me?). I guess I would have thought that this would be part of the docs already, or that I’m doing something odd. More likely, it’s an issue of “If you use an external package XYZ, you need to learn about XYZ”.

Here is an image of all my icons (pre and post build/install), and the one icon needed for my Windows distribution need (‘src-electron/icons/icon.ico’).

Big thanks @metalsadman for all your ideas and suggestions - that made a big difference and helped me along!

I didn’t know about electron’s BrowserWindow object’s icon property, so I tried that out but no go. I think a big difference between your build process and mine is that I have been using electron-builder versus you with electron-packager. I think I went this way a while back when I began because builder will also creates an installer file.

When I switched to electron-packager, lo and behold the file’s icon looks good like I’ve wanted. But, if I go this route I just need to figure out the installer aspect. On a whim, do you have an npm script in your package.json file that does this?

Thanks for going through your steps and showing your images. I can see that your app icons look fine and as-expected.

I know you mention editing the images in ‘src/statics/icons’. That was a big “Ahah!” moment for me, but when I tried that it had no effect…even using the original Quasar ones, they weren’t used in the build. Weird, huh? I do think, though, there’s something here that I’m not making a connection with, yet…

Did you do anything with the 3 Apple/Windows/Linux icons in ‘src-electron/icons’? That was my focus before your suggestions. From https://quasar-framework.org/guide/electron-preparation.html, it sounds like it’s actually the only place one has to deal with icons when only creating an Electron app.

Which bundler are you using? electron-builder or electron-packager? Below is my config in quasar.conf.js where I specify electron-bundler. I’m just wondering if there are obvious things that I missed in my bundler config (but’s this part of the file is dead simple).

electron: {
  bundler: 'builder',
  extendWebpack (cfg) {
    // do something with Electron process Webpack cfg
  },
  builder: {
    appId: 'com.etrac-mss.etrac'
  }
}

I do see where your various icon image filenames are mentioned in quasar.conf.js, but they are in the ‘pwa’ object, not the ‘electron’ object. I had paid little attention to it and had even deleted this from my file (I’ve now added it back in, just on a whim). It’s the only connection that I can see between a config file and the images in ‘src/statics/icons’. You can see an example here, https://quasar-framework.org/guide/pwa-configuring-pwa.html#Configuring-Manifest-File, which seems to be the only place where the icon files you mention are ever mentioned. But isn’t that detail just for representing a web app manifest for PWAs, and not for electron building?

I did follow you suggestion though, and had used Photoshop to create all the 9 PNG images.

Some add’l info RE: how I created my app’s icon files…

As per one of the (4) recommended tools (via https://www.electron.build/icons) to create app icons (the three formats required) I uploaded my 512x512 PNG image to https://iconverticons.com/online/ and grabbed the resulting files.

I would even try downloading other peoples’ icons from that site, and I do have the same jagged result. That’s what helped me determine that the jagged images are not a result of my image/icon production process.

I’ve tried another idea, building with just the win32 target:

$ quasar build -m electron -T win32

So, with building for win32 only I deleted the Linux icon (‘src-electron/icons/linux-512x512.png’) under the impresson that since I’m not building for Linux this isn’t needed, and that the Windows icon (‘icon.ico’) was all that would be needed.

The build failed because it was still expecting the non-targetted platforms’ icons. I sorta get that - one should just have all the icon files in there regardless of your build, ok… So this idea didn’t get me to a good place.

Thanks for that, metalsadman! That’s sound logical. I hadn’t paid any attention to that folder in a long time.

When I look there (‘my-app/src/statics/icons’), I see that I actually have all the initial icons (the Quasar logo). Based on my building the app and see my logo from ‘my-app/src-electron/icons’, It seems like the ‘statics’ icons aren’t use in creating the Electron app icon(s), and are perhaps used for web apps. Metalsadman, did this work for you for a Windows desktop app?

I did pursue creating my logo at all the 6 specified sizes in that folder (‘my-app/src/statics/icons’), and ran the build. But to no avail - same jagged result.

My next test: I replaced ‘my-app/src-electron/icons’ with the 3 default Quasar icons. Building with these shows a jagged installer file icon, and installing the app results in a jagged Windows start icon. This tells me it’s not the graphic files that I’m creating.

What still boggles me is that all seems to be controlled by one file: ‘src-electron/icons/linux-512x512.png’, despite the fact that I’m not building for linux.

So very confusing… Any other ideas or suggestions?

What’s also baffling to me is that 2 of the 3 specific icon file types aren’t used for me when, on Win7, creating the build.

From https://quasar-framework.org/guide/electron-preparation.html …

|   ├── icon.icns             # Icon file for Darwin (MacOS) platform
|   ├── icon.ico              # Icon file for win32 (Windows) platform
|   └── linux-256x256.png     # Icon file for Linux platform

I’ve found that even using the default Quasar icons that come when you init a new project - like if I keep them in my project - I only have to update the linux-256x256.png to provide my app’s branded icon. The other two, ico.icns & icon.ico, don’t make any difference. I know that the former is for MacOS so I shouldn’t be able to see that one play a role. But the latter, icon.ico, is what I’d expect to play a role here. But it obviously doesn’t for me since I kept the Quasar one there and that isn’t used - only my linux-256x256.png is used (to much begrudged jagged results).

I don’t find any help in the electron-build docs, either: https://www.electron.build/icons

This is quite confusing. I’m not sure if I’m missing something tricky, obvious, or if there are actually image processing bugs in this build workflow.

Anybody here ever do Quasar & Electron apps?

Here is a reference image. The built installer file’s icon is jagged. After installation, the app start icon is jagged. I’m using a 256x256 transparent PNG-24 as the source for Electron Builder.

I’m creating a desktop app and have an issue with the quality of app icons generated by the build process.

These icons are placed in “\src-electron\icons” according to https://quasar-framework.org/guide/electron-preparation.html.

I replaced the 3 icon files that are in this folder by default from Quasar with my own icon files. When I build (quasar build -m electron), the icon I see for Windows (Win7) is really jagged, and not at all smooth. That’s what is seen on the installer file, and then the app’s icon once it is installed.

My app icon is very circular, so it has smooth edges that can be easily seen, or else jaggedness that is easily noticeable.

Has anybody here every run into app icons that aren’t smooth, as a result of the build process? I’m getting anxious about delivering the project soon with a jagged-looking icon.