Could not open file using S3 signed URL

[saravananpolyglot]

I have tried to open a pdf file from AWS S3 using S3 signed URL with GET but its not working as doc-viewer creates HEAD request to S3 endpoint.

Even I configured S3 CORS settings.

ContentView.propTypes = {
  fileUrl: PropTypes.string,
};
export default function ContentView({ fileUrl }) {
  const docs = [{ uri: fileUrl }];
  return fileUrl !== undefined && fileUrl !== null ? (
    <DocViewer pluginRenderers={DocViewerRenderers} documents={docs} style={{ height: 1000 }} />
  ) : (
    <p>Loading...</p>
  );
}

[yaminibandi]

Can you try by adding prefetch method like below:

<DocViewer
documents={[{ uri: s3URL! }]}
prefetchMethod="GET"
...

[shrinathaithal]

Agreed, this does not work with S3. How does one work with this?

[luap2703]

Is there a fix for this???

[OlajideOgun]

any fix for this please?

[evertoont]

Try adding the fileType in your docs list object

For example:
const docs = [{ uri: fileUrl, fileType: 'pdf }];

[pkatul]

Make sure that your s3 bucket cors permission is allowed from localhost

Check here
https://repost.aws/knowledge-center/s3-configure-cors

[Maulik-008]

Hii , I have a same problem with it.
Actually react-doc-viewer is using microsoft api internally ,

• https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(currentDocument.uri)}

and this one failed to access s3 signed url

so i have used google api >

• https://docs.google.com/gview?url=${encodeURIComponent("URL")}&embedded=true

and make a custom render function with react-doc-viewer

This solution worked for me

Code --

 const CustomFileRender = ({ mainState: { currentDocument } }) => {
  if (!currentDocument) return null;

  const googleDocsViewerUrl = `https://docs.google.com/gview?url=${encodeURIComponent(
    currentDocument.uri
  )}&embedded=true`;

  return (
    <div style={{ width: "100%" }} id="my-doc-renderer">
      <iframe
        className={"doc"}
        width="100%"
        height="100%"
        src={googleDocsViewerUrl}
        frameBorder="0"
      ></iframe>
    </div>
  );
};

// Define the file types that this renderer will handle
CustomFileRender.fileTypes = [
  "pdf",
  "application/pdf",
  "xls",
  "application/vnd.ms-excel",
  "xlsx",
  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
  "ppt",
  "application/vnd.ms-powerpoint",
  "pptx",
  "application/vnd.openxmlformats-officedocument.presentationml.presentation",
  "doc",
  "application/msword",
  "docx",
  "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
];
CustomFileRender.weight = 1;

export default CustomFileRender;

// Preview

const documentsList = [ { uri:"urldata" , fileType:"docx"  }]
     <DocViewer
        pluginRenderers={[CustomFileRender, ...DocViewerRenderers]}
        documents={documentsList}
        style={{ width: "80%", height: 500 }}
      />

Note - It's necessary to provide fileType on uri array