i am working on a script where users can share content using the native Javascript Share API.

title, text, URL and an image file (blob).

But i want to add an intermediate step where i first show the data (including the image) to the user and then - after click on "share now" - call the share API itself.

Therefore i also want to show a preview of the image file in the share object.

But i wonder how i can get the Blob() out of the filesArray and show it in the frontend to the user...

This is what i tried:

function sharePreview(data) {
  
        let code = "";
        
            if(data.title != undefined) {
                code += "<strong>"+data.title+"</strong><br />";
            }
            
            if(data.text != undefined) {
                code += data.text+"<br />";
            }
            
            if(data.url != undefined) {
                code += "URL: "+data.url+"<br />";
            }
            
            if(data.files != undefined) {
        code += "Image: ???<br />"
                console.log("Files: ", data.files[0]);
            }
            
        let btn = document.createElement("button");
        btn.classList.add("button");
        btn.innerText = "share Now";
            
        let l = document.getElementById('layer');
    l.innerHTML = code;
        
        l.appendChild(btn);
        
        btn.addEventListener("click", function() {
        
                try {
                    navigator.share(data);
                }
                catch(err) {
                    console.log("Teilen fehlgeschlagen. "+err);
                }
        });
  
}

https://codepen.io/kili123/pen/dymPBKr