Issue trying to change a loaded PDF in the embed

Question

I'm using the Adobe PDF Embed API and can successfully display a PDF after a user selection. When my app starts up, I initialize a DC View object:

let dcView = new AdobeDC.View({
    clientId: ADOBE_KEY, 
    divId: div
});

And after a user has dragged a file, I use a file reader to to throw a promise at it:

let reader = new FileReader();
let name = this.pdfFile.name;
      
reader.onloadend = function(e) {
    let filePromise = Promise.resolve(e.target.result);
    dcView.previewFile({
        content: { promise: filePromise }, 
        metaData: { fileName: name }
    });

};
reader.readAsArrayBuffer(this.pdfFile);

This works perfectly... once. If I drag a file again, when it gets to the render portion, only the filename on top of the embed changes, not the actual rendered contents.

Answer 1

You'll need to recreate the AdobeDC.View object prior to loading a new document. I'm guessing that this is because there may be unresolved Promises if an operation takes a while to resolve like loading annotations or performing a search. Your new code might look like this...

let reader = new FileReader();
let name = this.pdfFile.name;
      
reader.onloadend = function(e) {
    let filePromise = Promise.resolve(e.target.result);
    let dcView = new AdobeDC.View({
        clientId: ADOBE_KEY, 
        divId: div
    });        
    dcView.previewFile({
        content: { promise: filePromise }, 
        metaData: { fileName: name }
    });

};
reader.readAsArrayBuffer(this.pdfFile);