Dynamics CRM: Display PDF from File type field in Web Resource on Form

Question

I've uploaded a PDF file (Size 30MB) on a File type Field.

I'm then trying to display the PDF from the field on a web resource but it doesnt show. If I try to display the same PDF from annotation entity, it displays fine. This is how I'm fetching the data from file type field:

            var startBytes = 0;
            var req;
            var increment = 4194304;
            var clientUrl = Xrm.Utility.getGlobalContext().getClientUrl();
            var url = clientUrl + "/api/data/v9.1/my_entity(" + recId + ")/my_fields?size=full";

            while (startBytes <= fileSize) {
                var result = await makeRequest("GET", url, startBytes, increment);
                req = result.target;
                if (req.status === 206) {
                    finalContent += JSON.parse(req.responseText).value;
                    startBytes += increment;
                    if (fileSize === 0) {
                        fileSize = req.getResponseHeader("x-ms-file-size");
                        fileName = req.getResponseHeader("x-ms-file-name");
                    }
                }
                else if (req.status === 404) {
                    break;
                }
            }

        if (fileBodyAndMimeType[1] === "pdf") {
            var newSrc = "data:application/pdf;base64," + finalContent;
            const blob = dataURItoBlob(newSrc);
            var temp_url = window.URL.createObjectURL(blob);
            $("#myframe").attr("data", temp_url);
            document.getElementById("myImage").style.display = "none";
        }

The above dataURItoBlob methog gives me the following error:

DOMException: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.

How to display the PDF from file type field on a web resource correctly?

Answer 1

a sample code to get the content of a File column is the following:

$.ajax({
    type: "GET",
    contentType: "application/json; charset=utf-8",
    xhr: function() { var xhr = new XMLHttpRequest(); xhr.responseType = "blob"; return xhr; },
    url: Xrm.Utility.getGlobalContext().getClientUrl() + "/api/data/v9.1/sample_customtables(2fb4d8e0-4ac9-f27a-939e-e52621aae0d8)/sample_file/$value",
    beforeSend: function (req) {
        req.setRequestHeader("OData-MaxVersion", "4.0");
        req.setRequestHeader("OData-Version", "4.0");
        req.setRequestHeader("Accept", "application/json");
    },
    async: true,
    success: function (data, textStatus, xhr) {
        var fileContent = data;
        var fileName = "file.bin"; // default name
        
        // NOTE: the following code decodes the file name from the header
        var contentDisposition = xhr.getResponseHeader("content-disposition");
        try {
            var strToCheck = "filename=";
            var mimeEncodingCheck = "\"=?utf-8?B?";
            if (contentDisposition.indexOf(strToCheck) > 0) {
                var parseFileName = contentDisposition.substring(contentDisposition.indexOf(strToCheck) + strToCheck.length);
                if (parseFileName.indexOf(mimeEncodingCheck) === -1) { fileName = parseFileName; }
                else {
                    var parseFileNameBase64 = parseFileName.substring(parseFileName.indexOf(mimeEncodingCheck) + mimeEncodingCheck.length, parseFileName.length - 3);
                    fileName = decodeURIComponent(atob(parseFileNameBase64).split("").map(function (c) { return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2); }).join(""));
                }
            }
        } catch {}

        console.log("File retrieved. Name: " + fileName);

        // NOTE: Uncomment the following lines to download the file
        // var saveFile = new Blob([fileContent], { type: "application/octet-stream" });
        // var customLink = document.createElement("a");
        // customLink.href = URL.createObjectURL(saveFile);
        // customLink.download = fileName;
        // customLink.click();
    },
    error: function (xhr, textStatus, errorThrown) {
        console.log("Error retrieving the File");
    }
});

in this sample you can get a Blob by doing this line (that is commented)

var saveFile = new Blob([fileContent], { type: "application/octet-stream" });

the returned content from a File column is binary and not a Base 64 like you get from an annotation.

After you get the blob you can use the createObjectURL method

For Dynamics 365/Dataverse you can use Dataverse REST Builder to generate the sample code.