How do I enable downloading of a file with iframe?

Ask the community
, ,
1

I am using velo to create a custom workflow and request a file from an API. Once I have the response which includes the file object, I then send it to an iframe which has access to the window and document objects to enable the download of the file to the users machine.

let blobURL = (window.URL && window.URL.createObjectURL) ? window.URL.createObjectURL(blob) : window.webkitURL.createObjectURL(blob);
let tempLink = document.createElement('a');
tempLink.style.display = 'none';
tempLink.href = blobURL;
tempLink.setAttribute('download', filename);
document.body.appendChild(tempLink);
tempLink.click();

Everything is working, except that chrome does not allow the download becasue the iframe does not include the correct flag.

Download is disallowed. The frame initiating or instantiating the download is sandboxed, but the flag ‘allow-downloads’ is not set.

Is there a way to enable this flag in Wix?
Or an alternative method of allowing the download that does not involve creating a custom element which negates the benefits of using the Wix design elements.

2

You should use a custom element , not the sanboxed iframe.

3

With iframe there is a postMessage() method to send the data into the iframe to handle the download.

Is there a similiar method to send data from the site to the custom element?

4

@niall83161 to send data from the page to a custom element use .attribute()
(and if the data is not a string, stringify it first and parse it inside parse it)

Also read the following articles to better understand how to detect attribute change from inside the custom element:

Have a look at:
attributeChangedCallback and static get observedAttributes