I am trying to serve PDF files from a bucket on Amazon-S3, using PDF.js in the browser. I have amended the relevant CORS policy in S3. However, I am receiving the following error message in the browser:
PDF.js v2.2.71 (build: 80135378)
Message: file origin does not match viewer's
After a search, I have found several related questions, such as this question here, as this appears to be a relatively common issue. It is fairly obvious therefore that I need to allow Amazon S3 as a host origin. Therefore, I amend my viewer.js file to include the host, like so:
var HOSTED_VIEWER_ORIGINS = ['null',
'http://mozilla.github.io',
'https://mozilla.github.io',
'https://thepdfbucket.s3.eu-west-
2.amazonaws.com'];
However, if I do a hard reload and inspect sources, I can see that the error is thrown in webpack:///web/app.js:
Uncaught (in promise) Error: file origin does not match viewer's
at validateFileURL (app.js:1482)
at webViewerInitialized (app.js:1541)
If I examine app.js, I can see the HOSTED_VIEWER_ORIGINS array, mapped from the viewer.js file. However, it does not include the amended array, i.e. my addition of https://thepdfbucket.s3.eu-west-2.amazonaws.com.
I cannot get this to work. I believe I probably have a cache issue, however, I have cleared all the browser's cache, I have even built PDF.js again from github and tried to amend the viewer.js file, prior to compilation.
If I have amended the viewer.js file, and app.js is mapped from viewer.js, but it does not reflect the recent changes, my conclusion is that it must be using a cached file. How do I clear this cache, and get app.js to reflect the changes I have made?
I really would appreciate any help here, as I've spent the whole of yesterday on this issue, and I cannot get my head around how this all fits together.
Many Thanks.
I also ran into this problem and investigated.
Version of PDF.js: pdfjs-3.3.122
The reason is that when debugging in the browser, the debug information is from viewer.js.map and not the actual working viewer.js source code.
The quickest way to debug is to delete viewer.js.map.
Perhaps the reason for the error is a mis-specified value.
That was the case for me.
Incorrect: https://google.com/
Correct: https://google.com
Translated with www.DeepL.com/Translator (free version)
Related
I've read up about this error but the proposed solutions don't seem to work for .doc/.docx files.
I am building a web app which involves displaying pdf/doc files. The files are stored in a google storage bucket, and I am using Firebase's getDownloadURL() method to get a link which I can use as the source in an <iframe>. This works fine for PDF files directly. However, given that this direct display is not possible for doc/docx files, I tried displaying them through Google Docs Viewer by taking the generated URL and appending as follows:
https://docs.google.com/gview?url=https://firebasestorage.googleapis.com/v0/b/project-name.appspot.com/o/filename?alt=media&token=a-b-c-1-2-3
This yields a Refused to display <URL> in a frame because it set X-Frame-Options to same origin error. I have also tried adding an &embedded=true to the URL as has been suggested in other similar queries, but that yields another error: Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.
I thought this could be an issue with parsing the URL due to the "&", so I changed it to "%26", but the "sameorigin" error persists.
I'm not sure how to tackle this, and any guidance on how to resolve this issue (or alternative ways of solving the problem) would be greatly appreciated.
Google docs creates its own storage objects, and will only serve those objects. It won't display other objects that happen to be in doc/docx format from other repositories.
It sounds like you need a way to render objects you uploaded (using Firebase) to GCS. I don't have experience doing that specific thing but I suggest you try to find some software that does it. For example from a quick web search I found Render docx file in a browser.
I have been trying to publish some documentation and can't get it to work. From what I can tell it looks to me as if readthedocs is ignoring the autosummary_generate = True directive in conf.py
I am using autosummary and it works well on my local machine, with all the individual .rst files being generated when calling make html.
When building on readthedocs everything appears to work, with no errors being thrown, but when trying to browse the documentation the links do not work. Digging a bit deeper I see this type of warnings:
/home/docs/checkouts/readthedocs.org/user_builds/libgs-ops/checkouts/latest/docs/source/index.rst:23: WARNING: failed to import libgs_ops.propagator
Since that is a file that should be generated by autosummary I am assuming the problem is, as I mentioned, that readthedocs has not generated the files.
You can experience the problem for yourselves here;
https://libgs-ops.readthedocs.io/en/latest/
See how none of the links work.
I found this thread, in which someone references a similar problem in one of the responses, but as the problem asked appears to be different I permit myself to create this new thread. As I said, autosummary works fine on my local install, just not on readthedocs.
I am having trouble using dartdocgen and dartdoc-viewer to pump my JSON files to the browser. I have had success getting all the JSON files from my application but haven't had any success actually viewing them in the browser. Based on my research, the best way to do this is hosting dartdoc-viewer on a local server as mentioned by this document:
https://www.dartlang.org/tools/dartdocgen/#deploy
However I just cannot seem to get it to work following these directions (I would like to approach it via dartium):
https://github.com/dart-lang/dartdoc-viewer/
I understand that once I am able to run pub build and compile to javascript that I dump the client/build folder into my server along with the docs folder under the URL, I am golden. That's where the issue is, how to get it from the docs folder to javascript to the browser.
I would like to be able to use dartdocgen to it's full potential so can I get some ideas?
Just run dartdocgen --serve .
see https://www.dartlang.org/tools/dartdocgen/#view-locally
Is not what you are looking for?
In my app I upload a file to the server using HTML5 File API, however I am encountering a situation where a file is not accessible because it is being used by another process. This actually creates two different error conditions in firefox and in chrome. Is there a way to detect if a file is inaccessible using html5?
Have you looked the sample in this link which shows how you can read a file and in case of error you can write proper error handler:
http://www.azoft.com/spotlight/2011/02/02/filesystem-apifile-api.html
About your second questions "if there's an API call to just check if it is readable without actually having to read it locally", I verified that there is no such API to just get the file handle state and verify it. I think it could be because (but i may be wrong):
the web application runs on any box with limited privilege and getting file handle could require SYSTEM level access
The file handle access could be different for different OS (Linux or Windows)
Gurus of SO
I am trying to play with CACHE MANIFEST/HTML5. My app is JS heavy and built on jquery/jquerymobile.
This is an excerpt of what my Manifest looks like
CACHE MANIFEST
FALLBACK:
/
NETWORK:
*
CACHE:
/css/style.css
/js/jquery.js
But somehow, the app doesn't load the files the first time itself and the entire app breaks down.
Is my format wrong?
Should I never load JS into the Cache?
How should I treat this differently to always check the network first if anything isn't available and only load stuff available from the Cache?
Thank you.
I tried a simple page with your cache manifest and it worked fine for me, so I'm not really sure what the problem is. But,
Yes, there is something wrong with the format. The entries in the FALLBACK section need to have two parts: a pattern, and a URL. This says "if any page matching the pattern is not available offline, display the URL instead (which will be cached)." The main example of this (as shown here) is "/ /offline.html", which means "for all pages, if we are offline and they are not cached, display /offline.html instead." However, I don't think this is the source of your problem since I tested it with your exact manifest and it still worked.
There is nothing special about JS files. It should be fine to load them into the cache.
I don't understand the third question. There are possibly two goals here: a) how do you check to see if there is a newer version of the file available online first, before going back to the cache, and b) how do you check the network to see if there is a file that is not cached, and if we are offline, fall back to an error page. The answer to (a) is that once you have turned on the cache manifest, things work very differently. It will never check for new versions of the files unless there is a new version of the manifest also. So you must always update the manifest whenever you change any files. The answer to (b) is the FALLBACK section.
See Dive Into HTML5's excellent chapter on this, particularly the section "The fine art of debugging, a.k.a. “Kill me! Kill me now!”" which explains how the manifest updates.
Also I don't think we've gotten to the meat of your question, because it's unclear what you mean by "the app doesn't load the files the first time itself". Which files don't load? Do they load properly after a refresh? Etc.
The only way I got this to work to refresh a cache was to rename the manifest file with a commit number or timestamp, and change the cache declaration to
<html manifest='mymanifest382330.manifest'>
I made this part of my build.