Copy link to clipboard
Copied
Hi,
I'm just getting started with Embed PDF...
When I try to load a PDF I get the error:
Uncaught Error: [mobx] Invariant failed: Since strict-mode is enabled, changing observed observable values outside actions is not allowed. Please wrap the code in an `action` if this change is intended. Tried to modify: AppStore@40.isHidingBranding
at nt (dc-mobx.js:16)
at tt (dc-mobx.js:16)
at Xt (dc-mobx.js:16)
at t.prepareNewValue (dc-mobx.js:16)
at Se (dc-mobx.js:16)
at AppStore.set [as isHidingBranding] (dc-mobx.js:16)
at AppStore.initialize (AdobeDCViewApp.js:2)
at JAOs.window.renderApp (AdobeDCViewApp.js:2)
at MessageExecutor._executeAction (ViewSDK.js:1)
at MessageExecutor._takeAction (ViewSDK.js:1)
To be honest I'm not sure what this "really" means but I wasn't expecting to have to figure out what "mobex actions" are to try and get this working... 😞
The application is a simple "lit html" web components based app running entirely client side.
In the page HTML I use an event listener to mark when the sdk is ready:
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
var adobeDcSdkReady = false;
var adobeDCView;
document.addEventListener("adobe_dc_view_sdk.ready", function() {
console.log(`addEventListener (adobe dc) - triggered`);
adobeDcSdkReady = true;
});
</script>
Then in a window.onload function (which uses ES6 imports, so is probably running in javascript strict mode) I initialise the viewer:
if (adobeDcSdkReady) {
console.log(`window onload (adobe dc) - key is: ${adobeEmbedPdfKey}`);
adobeDCView = new AdobeDC.View({clientId: adobeEmbedPdfKey, divId: "adobe-dc-view"});
} else {
console.log(`window onload (adobe dc) - not ready`);
}
In the browser console I see the line "window onload (adobe dc) - key is", so I think the viewer is being created with a valid key after the sdk is initialised.
Finally I try to view a PDF file (which is available as an ArrayBuffer) by doing:
if ((this.pdfFileArrayBuffer) && (this.adobeDCView)) {
this.adobeDCView.previewFile({
content: { promise: this.pdfFileArrayBuffer },
metaData: { fileName: "preview.pdf" }
});
}
This is where the exception (at the top of this post) is thrown.
Any suggestions/pointers gratefully received.
Cheers, Andy
Ah yes,. this is expected as the result of previewFile is a promise. I'm glad you got it working!
Copy link to clipboard
Copied
That is... interesting. Do you have code I could try to run here to replicate this? I know you shared a lot of code above, but could you share something more inline that I could use as a basis?
Copy link to clipboard
Copied
Hi, thanks for responding.
I created a standalone example (repo in github) - which worked! 🙂
The change was trivial, in my app I added an await on the call to previewFile(), so the code is now:
await this.adobeDCView.previewFile({
content: { promise: this.pdfFileArrayBuffer },
metaData: { fileName: "preview.pdf" }
});
(the example app is almost the same)
I'm only just starting to use javascript again, there have been lots of improvements since I last used it but I am going to have to find a linting tool that highlights potential missing await statments...
Cheers, Andy
Copy link to clipboard
Copied
Ah yes,. this is expected as the result of previewFile is a promise. I'm glad you got it working!