Method for embedding zip/pdf/whatever files into your RP document

advanced-prototyping

#1

It turns out that, similar to embedding base64-encoded sound files, you can pretty much embed any file you want to allow your user to download into your prototype.

Live example | embedded-files.rp (195.8 KB)

(Note: if you’re viewing this on mobile, the embedded PDF may or may not work depending on your browser. Desktop should work well across the board)

You will still need to base64-encode your file as in the post linked above. Once you’ve done that (I used a zip file for this example), you can put this code into an “open external link” action:

javascript:
{
  var uri = `data:application/zip;base64,[[YOUR BASE64-ENCODED FILE HERE]]`;
  var name = "embedded-download.zip";
  var link = document.createElement("a");
  link.download = name;
  link.href = uri;
  link.style.display = "none";
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  delete link;
  window.close();
}

In my example RP file, I just put the entire base64-encoded file where I have [[YOUR BASE64-ENCODED FILE HERE]], but you can also store it in a variable or in a hidden widget, which would be appropriate if you want to have multiple download buttons in your prototype.

You will need to change the MIME type (application/zip in my above example) to match the type of file you’re embedding. You can see a list of common MIME types here.

Change the file name (embedded-download.zip in the example) to whatever name you want.

I’ve also included an example of an embedded PDF displayed in an inline frame, which is considerably simpler: just set the frame target as the data URI (the string that looks like data:application/pdf;base64,BASE64-ENCODED-PDF-GOES-HERE)

That’s it!


Add zip files to cloud and access through an Axure prototype