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?
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.