locked
Change content type in javascript/jquery to display a azure blob document in iframe RRS feed

  • Question

  • Hi All,

    I want to display my azure blob document into iframe. The issue is that the content type for all the documents in the azure blob is application/octet-stream type. So the iframe in Google Chrome downloads the file rather than showing into iframe popup. The download behavior is obvious in Google Chrome as the content type is application/octet-streamtype so its not smart enough like Internet Explorer to get the actual file content type so its simply downloads the file. 

    Now my question is how can i change the content type in of the azure blob file in javascript in client side so that it opens in pop up iframe. I dont want to change the content type of the file in azure Blob throgh code. I just want to chnage in client side and render in iframe. please let me know if you have any other question. My code to diplay pdf file in iframe is as below:

    function GetFileHTML(path) { // Note: path is the blob file name with sastoken
                debugger;
                if (path !== null) {
    
                    var pathLower = path.toLowerCase();
                    var fileContainherHTML;
    
                    if(pathLower.indexOf(".pdf") >= 0){fileContainerHTML = `<object class="file-container" data="${path}" type="application/pdf"><iframe class="file-container" src="${path}" type="application/pdf">This browser does not support PDFs. Please download the XML to view it: <a href="${path}">Download PDF</a>"</iframe></object>`;}
                   
                    else if (pathLower.includes(".xml")) {
                        fileContainerHTML =
                            '<iframe class="file-container" src="${path}" type="text/xml">This browser does not support XMLs. Please download the XML to view it: <a href="${path}">Download XML</a>"</iframe>';
                    }
                    else if (pathLower.includes(".htm")) {
                        var srcPrefixArr = result.metadata_storage_path.split('/');
                        srcPrefixArr.splice(-1, 1);
                        var srcPrefix = srcPrefixArr.join('/');
    
                        var htmlContent = result.content.replace(/src=\"/gi, 'src="${srcPrefix}/');
    
                        fileContainerHTML =
                            '${htmlContent}';
                    }
                    else if (pathLower.includes(".mp3")) {
                        fileContainerHTML =
                            '<audio controls><source src="${path}" type="audio/mp3">Your browser does not support the audio tag.</audio>';
                    }
                    else if (pathLower.includes(".mp4")) {
                        fileContainerHTML =
                            '<video controls class="video-result"><source src="${path}" type="video/mp4">Your browser does not support the video tag.</video>';
                    }
                    else if (pathLower.includes(".doc") || pathLower.includes(".ppt") || pathLower.includes(".xls")) {
                        var src = "https://view.officeapps.live.com/op/view.aspx?src=" + encodeURIComponent(path);
    
                        fileContainerHTML =
                            '<iframe class="file-container" src="${src}"></iframe>';
                    }
                    else {
                        fileContainerHTML =
                            '<div>This file cannot be previewed. Download it here to view: <a href="${path}">Download</a></div>';
                    }
                }
                else {
                    fileContainerHTML =
                        '<div>This file cannot be previewed or downloaded.';
                }
    
                return fileContainerHTML;
            }

    Monday, October 29, 2018 11:00 PM

All replies

  • The content-type is part of the response header and unfortunately you won't be able to change that in JavaScript for your purpose.

    I am not and expert in chrome extensions development but perhaps you can look into modifying the content-type using a browse extension.

    Respectfully,

    Gustavo Lopez. 

    Thursday, November 1, 2018 8:58 PM