Docs google viewer not working with iframe

Question

I am trying to view the .doc extension files with google doc viewer using an iframe in my web app.

Here is the code :

<iframe  src={"https://docs.google.com/viewer?url=" + this.state.file + "&embedded=true"}  id="frame-id" allowFullScreen={true}/>

this.state.file has the url =

url=http://localhost:8000/media/somefolder/amO3N9pP/someusers/jEARG7xb/someassignments/amO3N9pP/1/file-sample_1MB.doc&embedded=true

localhost 8000 is my backend server which is up and running.

When the user clicks on the .doc file in the website, the preview is blank and the file is forced to download.

I viewed the activity in my network tab. I can see the url of the file which is fine.

When I click on the file the status gets cancelled in the network tab and then its force download with status 200.

Answer 1

Answer:

Google Docs viewer does not work with files on localhost.

More Information:

The Google Docs viewer is external to your network and can only read files which are publically available. There is no way for it to be able to access files that are stored locally and passing it a file path on the localhost:8000 address will not give it access.

You will need to find another solution to view localhost files in the browser.