Display office file by getting from global state

Product Version: latest

Please give a brief summary of your issue:
Cant display office file in webviewer

Please describe your issue and provide steps to reproduce it:
In page 1, I have an input to pass data into it. But when i navigate to page 2, I set perform load data by using webviewer, it cant be done by some reason (it’s working file with pdf file).
-With docx file, the system said that file not found."

-With xlsx and pptx file, the system return this message

Please provide a link to a minimal sample where the issue is reproducible:

Hello Hoàng,

Thank you for contacting WebViewer Forums.

Can you provide a code snippet of how you are loading these documents into the Viewer? I suspect there is a data conversion issue.

Regards,
Luke

Hi Luke, here is the following code snippet i used to display document
image

Hello Hoàng,

The code you sent looks fine - For testing purposes, instead of a page redirect, can you call it directly on the main app? For example, I have the following that was working for me:

WebViewer(
...
).then((instance) => {
document.getElementById('filepicker').onchange = (e) => {
        const file = e.target.files[0];
        console.log(file);
        if (file) {
          instance.UI.loadDocument(file);
        }
      };
...
return (
    <div className="App">
      <div className="webviewer" ref={viewer}></div>
      <div>
        <input id="filepicker" type="file" />
      </div>
    </div>
  );

Regards,
Luke

My idea is that the first page allows the user to upload a file, and the second page is used for editing the document if needed. On the other hand, if the user doesn’t want to edit it, they can simply submit the file on the first page.

This is a sample repo i just created GitHub - gianghoang23/demo-apryse. Many thanks for helping me.

Hello Hoàng,

Running your project, I am able to load and view docx documents just fine. Could there be a problem with the document you are testing with?

Regards,
Luke