Using embedded data file link in iframe

Hi, the below is working for me to view an image file within an iframe that was uploaded using the file upload question.

First, create an Embedded Data field called "FileURL" and put it after the Block that contains the File Upload question in the Survey Flow. Use Piped text to set this field with the File URL, like in the below:

Next, in a Block that comes after the Embedded Data element, create a Text/Graphic question and use the Rich Content Editor's HTML/Source view "<>" to update the Question Text with the below:

<div class="container"><iframe width="640" src="${e://Field/FileURL}" height="360" class="responsive-iframe"></iframe></div>

Finally, add the below CSS to the Style section of the survey's Look & Feel:

.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

Although, you don’t need an iframe to display an uploaded image back to the respondent. You can also include it as an img tag, like in the below:

<img src="${e://Field/FileURL}" alt="fileupload" width="500" height="600">

Thanks for your answer. While both of your suggestions work for image files, they don’t work for PDFs, and our users regularly submit receipts in both formats. I’ve also tested whether <embed> or <object> will work, but no luck. I’m wondering if this is just a Qualtrics quirk, since I haven’t had any issues with using iframe/embed/object to display PDFs in external sites.

I see what you mean. In this stackoverflow thread, someone suggests that the download happens because "The server sends the data with a HTTP header inline-disposition that causes a download. You can strip this header via declarativeNetRequest or webRequest."

Also in that thread, the original poster patchie found a solution which involved using JS to convert the document to base 64 (discussed here) and used jQuery to insert it into an embed. I have adapted it so that the base 64 data will be used if the file name contains "pdf" and the piped URL for all other file names. The iframe is inserted after the question text using JS.

To give it a try, create the Embedded Data fields of "FileURL" and "FileName" and put them after the block that contains the file upload question . Set FileURL with the uploaded file URL and FileName with the file's name using piped text. Also include the CSS from my other post.

In a Text/Graphic question that comes in a block after the Embedded Data element, add the below to the question's JavaScript:

function base64Encode(str) {
    var CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
    var out = "", i = 0, len = str.length, c1, c2, c3;
    while (i < len) {
        c1 = str.charCodeAt(i++) & 0xff;
        if (i == len) {
            out += CHARS.charAt(c1 >> 2);
            out += CHARS.charAt((c1 & 0x3) << 4);
            out += "==";
            break;
        }
        c2 = str.charCodeAt(i++);
        if (i == len) {
            out += CHARS.charAt(c1 >> 2);
            out += CHARS.charAt(((c1 & 0x3)<< 4) | ((c2 & 0xF0) >> 4));
            out += CHARS.charAt((c2 & 0xF) << 2);
            out += "=";
            break;
        }
        c3 = str.charCodeAt(i++);
        out += CHARS.charAt(c1 >> 2);
        out += CHARS.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
        out += CHARS.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));
        out += CHARS.charAt(c3 & 0x3F);
    }
    return out;
}

function getBinary(file){
    var xhr = new XMLHttpRequest();
    xhr.open("GET", file, false);
    xhr.overrideMimeType("text/plain; charset=x-user-defined");
    xhr.send(null);
    return xhr.responseText;
}

var file = "${e://Field/FileURL}";
var b = getBinary(file);
var b64 = base64Encode(b);
console.log(b64);

var filename = "${e://Field/FileName}";

var qid = this.questionId;

if (filename.includes("pdf")){

var elementpdf='<div style="text-align:center" class="container"><iframe width="640" style="text-align:center" src="data:application/pdf;base64,'+b64+'" height="360" class="responsive-iframe"></iframe></div>';
jQuery(elementpdf).insertAfter("#"+qid+" .QuestionText");

}else{

var elementelse='<div class="container"><iframe width="640" src="${e://Field/FileURL}" height="360" class="responsive-iframe"></iframe></div>';
jQuery(elementelse).insertAfter("#"+qid+" .QuestionText");

}