Embed API using base64 string of PDF

[R.M.R]

adobeDCView.previewFile({
      content: base64str,
      metaData:{fileName: "check.pdf"}
    },

I have not been successful in using the EmbedAPI when the PDF is a base64hex string. Does the content object of the Preview method support it. If so how? I tried some of the options but it gives content error

Thanks,

[Matthews27]

Can you please send me more information about this

[brajeshk12751679]

No, PDF Embed APIs don't support base64 encoded PDF. Please find more information on Embed APIs here - https://www.adobe.io/apis/documentcloud/dcsdk/docs.html. You can however, open file in your application, convert from base 64 and pass converted blob to Embed APIs. Help documentation also describes how to pass file blob. 

[R.M.R]

Hello Brajesh:

Thanks for this. In fact, I am doing something similar but I seem stuck at understanding the content promise.

Here is what I am doing. I am reading the file (from a secure drive with auth) as a blob. I tried serving it as:

adobeDCView.previewFile({
 content: blob,
 metaData: { fileName: "test.pdf" }
 },
 {
   embedMode: "SIZED_CONTAINER"
 });

It gives a content error

[R.M.R]

I even tried

var filePromise = blob.arrayBuffer();
..
adobeDCView.previewFile({
  content: {promise: filePromise},
  metaData: { fileName: "test.pdf" }
}

This too brought up the adobe viewer with a content error

[R.M.R]

I would have thought that the previewfile method would accept a blob as a file object when it is stored in indexed.db of the browser.

Here is what I do. I read the PDF from the secured drive and keep it in local storage of the browser. Then, when the user wishes to see the file, I would like to pass it to this function. I tried using the 

var fileObj = URL.createObjectURL(_content). _content be the content in local storage viz. PDF as a blob object. I would have thought that preview would support this. But it did not.

[Shubhanshu Dixit]

Hi Raghu,

If you refer the documentation, you will get the snippet of passing file promise. That might help your cause.

https://www.adobe.io/apis/documentcloud/dcsdk/docs.html?view=view

[R.M.R]

I did try ... as you can see above ... because in your example you have written a function that works with array buffers. I did my best in understanding the example and applying it for my use-case. Unfortunately, I was not successfully .., and so currently am using the mozillas PDF.js project that supports what I want.

Thanks

[Shubhanshu Dixit]

Hi Raghu, 

You are not passing the filePromise correctly in your snippet. It should be a Javascript Promise https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise. If you check our documentation and snippet given there, you will get to know the difference.

In your case, 

var filePromise = Promise.resolve(ArrayBuffer);
..
adobeDCView.previewFile({
  content: {promise: filePromise},
  metaData: { fileName: "test.pdf" }
}

Thanks,

[R.M.R]

Thanks Shubhanshu Dixit for your quick response. When I try there is a loading icon that appears and they it says 100% document read and then a message: "An error occured". Nothing is showing up in console.

Like the above. When I click OK it just shows a blank screen

[Shubhanshu Dixit]

Hi Raghu, 

Please use the below snippet for using PDF Embed API, when your PDF is base64

<div id="adobe-dc-view"></div>
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
	function base64ToArrayBuffer(base64) {
// Refer the function implementation in link provided.
	}
	document.addEventListener("adobe_dc_view_sdk.ready", function(){ 
		var adobeDCView = new AdobeDC.View({clientId: "<YOUR_CLIENT_ID>", divId: "adobe-dc-view"});
		adobeDCView.previewFile({
			content:{ promise: Promise.resolve(base64ToArrayBuffer(base64str)) },
			metaData:{fileName: "check.pdf"}
		}, {});
	});
</script>

 https://stackoverflow.com/questions/21797299/convert-base64-string-to-arraybuffer

PS: I checked with a sample PDF and it's working fine. I hope the same for you 

[Joel Geraci]

I've posted a working CodePen here.

[R.M.R]

Thanks Joel. That looks helpful. It's rather late this part of the world. I will give this a try in my web component tomorrow. 

[vedika0101]

I tried replicating this, but it does not load the viewer at all. Neither an I getting any errors or console logs. 
Am I doing something wrong?
The viewer was working perfectly for the URL
@Shubhanshu Dixit 
@Joel Geraci  - your codepen is not showing the viewer

var resp : {"content": "JVBERi0xLjMKJcTl8uXrp/Og0MTGCjQgMCBvYmoKPDwgL0xlbmd0aCA1IDAgUiAvRmlsdGVyIC9GbGF0ZURlY29kZSA+PgpzdHJlYW0KeAGtnOtv5MaRwL/PX8HLl5OANc3345AEcBwfcsZdgtgCcsBtPmhHs9bauzOyHnaMQ/....."
};

function base64ToArrayBuffer(base64) {
        var bin = window.atob(base64);
        var len = bin.length;
        var uInt8Array = new Uint8Array(len);
        for (var i = 0; i < len; i++) {
          uInt8Array[i] = bin.charCodeAt(i);
        }
        return uInt8Array.buffer;
}  

 var previewFilePromise = adobeDCView.previewFile(
       {
        content: { promise: Promise.resolve(base64ToArrayBuffer(resp.content)) },
          metaData: {fileName: "Bodea Brochure.pdf", id: "12345ghb"}
       }, {
         enableSearchAPIs:true,
       });

[Joel Geraci]

@vedika0101  - I'm seeing the viewer just fine in Chrome. What browser are you using?