Unable to download from site preview in MacOS app

[iocouto]

Not sure whether this is intended behaviour, or a bug.

I’m working on a site where I’m dynamically generating images that the visitor can download. The site is quite simple: the images are embedded SVG elements, which the visitor can customise via the UI. Then, they can click buttons to download the image in different formats (.svg, .png, .webp, etc.).

The script generates the image in-browser by drawing it on a canvas element, then getting the canvas element to create a blob with an URL, which gets attached to a ‘link’. The link is then sent a ‘click’ event, and the image downloads.

Within Webstudio, when I preview the site and then try to ‘dowload’ the image, I either get a warning, or nothing. The warning tells me to confirm whether I want to “open the URL in an external app”, giving me the option to open, or cancel. In either case, I never get a download.

If I create a share link and preview it in a browser, I see that the site is working as expected, and the images download perfectly fine. There seemt to be no errors in the script, as I’ve checked the console output on both the browser and inside the Webstudio app itself, and no errors given. It just won’t download in Webstudio, which makes testing these scripts a real chore…

[kof]

Can you provide a reproducible share link with view permissions please? doesn't need to be original, but we have to be able to reproduce.

[iocouto]

@kof Here is an example, from a site template we’re working on:

https://p-04da1bf9-e2a3-4b93-8620-8f3bff5ad902.apps.webstudio.is/?authToken=bff8bda7-bafd-4cef-9b00-28d4b212f718&mode=design

On that page, you can use the various select inputs to change the colours on the displayed logos. Once a logo has the colours you want, you can download it by clicking the SVG/PNG/WEBP buttons.

In Webstudio’s own desktop app — on MacOS — clicking these buttons does nothing. No image is downloaded, and I spent quite a lot of time trying to troubleshoot my scripts… But when the site is published, everything works just as expected, and from the live server the images download without issue.

[kof]

does it work in regular chrome?

[iocouto]

It works on all browsers, if you access the published live site. But inside the Webstudio editor, even when we use the built-in preview, it doesn’t.

[iocouto]

@kof I have come across the same issue a second time now, on a page where images are directly linked — not dynamically generated. The page is setup with a gallery of image links, and when the user clicks on one, it downloads the full-size image directly. There are no scripts: everything is setup using just Webstudio's Editor.

In the Webstudio app, I can switch to Preview mode and click, click, click to my heart's content, and nothing downloads... As soon as I publish the site, clicking works exactly as expected (by accessing the published site with a browser).

Could it be related to the fact that these 'download links' rely on the download attribute, and that this attribute only works for same-origin URLs?...

[TrySound]

Yes, download won't work with different origin. Though here I fixed at least asset downloading #5238

[iocouto]

Yes, download won't work with different origin. Though here I fixed at least asset downloading #5238

Does that mean we should now be able to download linked images? I've just tried it, and I still cannot do it. To reproduce:

1. In the Webstudio app, start a new Webstudio project
2. Upload an image into your project's assets
3. Add a link instance to the body, and then place an image inside the link — set the source of the image to the image you just uploaded
4. Click on the link, toggle 'Download' ON, and connect it also to the image file you uploaded. This means that clicking the link should now download the image file.
5. Click the Preview button to preview your site, and while in Preview mode, click on the link.

Nothing happens on my end — no image file is downloaded...

[kof]

@iocouto whenever something is merged, it doens't mean its been released, make sure to check the release log https://github.com/webstudio-is/webstudio/releases