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.
Related
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)
I've been wondering how to fetch the PlayStation server status. They display it on this page:
https://status.playstation.com/en-us/
But PlayStation is known to use APIs instead of PHP database fetches. After looking around in the source code of the site, I found that they have a separate file called /data.json.
https://status.playstation.com/en-us/data.json
The content of this file is the same as the index file (for some reason). They use stuff like {{endDateTitle}} and {{message}}, but I can't find where it's defined, if it's pulled using a separate file or just pulled from a database using PHP.
How can I "reverse" this site and see if there's a API I can use to display the status on my site?
Maybe I did not get the question right, but it seems pretty straightforward.
If using firefox, open Developer tools, Network. Reload the page.
You can clearly see the requested URL
https://status.playstation.com/data/statuses/region/SCEA.json
It seems that an empty list as a status means "No problems" (since there are no problems I cannot verify this assumption. That's all
The parenthesis {{}} are used by various HTML templating languages, like angular, so you'd have to go through the js code to understand where they get updated.
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?
Well, using HTML5 file handlining api we can read files with the collaboration of inpty type file. What about ready files with pat like
/images/myimage.png
etc??
Any kind of help is appreciated
Yes, if it is chrome! Play with the filesytem you will be able to do that.
The simple answer is; no. When your HTML/CSS/images/JavaScript is downloaded to the client's end you are breaking loose of the server.
Simplistic Flowchart
User requests URL in Browser (for example; www.mydomain.com/index.html)
Server reads and fetches the required file (www.mydomain.com/index.html)
index.html and it's linked resources will be downloaded to the user's browser
The user's Browser will render the HTML page
The user's Browser will only fetch the files that came with the request (images/someimages.png and stuff like scripts/jquery.js)
Explanation
The problem you are facing here is that when HTML is being rendered locally it has no link with the server anymore, thus requesting what /images/ contains file-wise is not logically comparable as it resides on the server.
Work-around
What you can do, but this will neglect the reason of the question, is to make a server-side script in JSP/PHP/ASP/etc. This script will then traverse through the directory you want. In PHP you can do this by using opendir() (http://php.net/opendir).
With a XHR/AJAX call you could request the PHP page to return the directory listing. Easiest way to do this is by using jQuery's $.post() function in combination with JSON.
Caution!
You need to keep in mind that if you use the work-around you will store a link to be visible for everyone to see what's in your online directory you request (for example http://www.mydomain.com/my_image_dirlist.php would then return a stringified list of everything (or less based on certain rules in the server-side script) inside http://www.mydomain.com/images/.
Notes
http://www.html5rocks.com/en/tutorials/file/filesystem/ (seems to work only in Chrome, but would still not be exactly what you want)
If you don't need all files from a folder, but only those files that have been downloaded to your browser's cache in the URL request; you could try to search online for accessing browser cache (downloaded files) of the currently loaded page. Or make something like a DOM-walker and CSS reader (regex?) to see where all file-relations are.
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)