Trouble displaying S3 documents with presigned URLs in ngx-doc-viewer

Other Questions Google docs
1

Hey folks, I’m stuck trying to show S3 docs using ngx-doc-viewer. I’ve got presigned URLs, but Google Docs Viewer and Office Online just won’t play nice.

I’ve tried:

  1. Making a presigned URL from S3
  2. Using Google Docs Viewer like this:
let encoded = encodeURIComponent(myPresignedUrl);
let viewerUrl = 'https://docs.google.com/viewer?url=' + encoded + '&embedded=true';
  1. Trying Office Online:
let viewerUrl = 'https://view.officeapps.live.com/op/view.aspx?src=' + encoded;

But I keep getting errors like “No Preview Available” or “File is not publicly accessible”. The weird thing is, ngx-doc-viewer’s built-in viewer just downloads the file instead of showing it.

Has anyone cracked this? Are there other viewers that work with private S3 URLs? I’m pulling my hair out here! Any tips would be awesome.

2

I’ve encountered similar issues with S3 presigned URLs and document viewers. The problem often lies in how these viewers handle authentication. A workaround I’ve found effective is to create a server-side proxy. This proxy fetches the document from S3 using the presigned URL and then serves it to the client.

Here’s a basic approach:

  1. Set up an endpoint on your server that accepts the S3 key.
  2. Generate the presigned URL server-side.
  3. Use this URL to fetch the document content.
  4. Stream the content back to the client.

This method bypasses the authentication issues with third-party viewers. It does add some server load, but it’s generally more reliable. You might also want to explore using AWS CloudFront with signed URLs for better performance and security.

3

hey tom, had similar headaches. try using pdf.js for pdfs, it handles s3 urls better. for other docs, maybe look into aws amplify’s document viewer component? it’s built to work with s3. if all else fails, u could always download and open locally as a last resort. good luck man!

4

I’ve been down this rabbit hole before, Tom. The struggle is real with S3 presigned URLs and document viewers. Here’s what finally worked for me:

Instead of relying on external viewers, I ended up using a combination of browser-native viewers and custom solutions. For PDFs, the browser’s built-in viewer usually does the trick. For other file types, I implemented a custom viewer using libraries like mammoth.js for Word docs and SheetJS for Excel files.

The key was to fetch the file content directly using the presigned URL on the client-side, then render it in the browser. This approach bypasses the issues with third-party viewers not recognizing the authentication in the URL.

It’s not a one-size-fits-all solution, but it’s been more reliable than fighting with Google Docs Viewer or Office Online. Plus, it gives you more control over the viewing experience. Might be worth a shot if you’re still banging your head against the wall.