1

I want to render .doc files after the user upload the files in the browser

In my web app built with React, I have successfully rendered .pdf files using a blob which looks something like this

const someFileFunction = (file) => {
    let xhr = new XMLHttpRequest(), resStatus;

    xhr.open('GET', file);
    xhr.onreadystatechange = someFunction;
    xhr.responseType = 'blob';
    xhr.send();
    
    function someFunction() {
       
         if (this.readyState === this.DONE) {
            if (this.status === 200) {
             
            if (splitUrl(file, "extension") === 'pdf'){

                //this.response is a blob as we set the type of response above.

                let urlData = URL.createObjectURL(this.response);  
                document.querySelector('#some-selector').src = urlData

              }
          }
     }
   } // someFunction ends here 
}

Similar to the procedure which I implemented to render .pdf files using a blob. Can I also render .doc files, if its possible, can anyone kindly elaborate how to do so ?

Thanks in advance :)

Aniket Yadav
  • 129
  • 2
  • 11
  • I'm really curious how you made it work for pdfs in the first place. I put a pdf in my /public folder and tried to run this provided code on it, and it's not working. I verified that the pdf is accessible publicly, but the `this.status === 200` line is never coming out as true, status = 0 instead. – TKoL Sep 22 '20 at 11:06
  • nevermind, i think i got it to work - it was most likely a CORs issue – TKoL Sep 22 '20 at 11:22
  • https://stackoverflow.com/questions/27957766/how-do-i-render-a-word-document-doc-docx-in-the-browser-using-javascript – TKoL Sep 22 '20 at 11:23
  • The link you shared is not the answer to my question. Anyways Thanks – Aniket Yadav Sep 22 '20 at 11:26
  • Quote from the link I shared: "No browsers currently have the code necessary to render Word Documents, and as far as I know, there are no client-side libraries that currently exist for rendering them either. However, if you only need to display the Word Document, but don't need to edit it, you can use Google Documents' Viewer via an – TKoL Sep 22 '20 at 11:27
  • 1
    Assuming 'file', in your function, is a link to a .doc file hosted in a folder online, I think the `iframe google documents viewer` idea is at the very least worth a try – TKoL Sep 22 '20 at 11:29
  • Could you suggest any method to parse/render .txt files in the browser ? – Aniket Yadav Sep 23 '20 at 08:49
  • If you mean using javascript to read the contents of a file that someone selected or dragged+dropped into your application, [try this](https://stackoverflow.com/questions/22659164/read-a-drag-and-dropped-file) – TKoL Sep 23 '20 at 08:50
  • 1
    Just read the contents using the `FileReader` class and then render them however you want – TKoL Sep 23 '20 at 08:51
  • In my web the user uploads the file from the local computer into the web and before submitting the files when the user clicks on the file it should get previewed. – Aniket Yadav Sep 25 '20 at 13:30
  • 1
    ` – TKoL Sep 25 '20 at 14:12
  • Yes, I was wrong I meant after upload only. I am using localhost:8000 to run my backend and running react on localhost 3000. After the upload of doc file the url looks like this i.e this.state.file has this url url=http://localhost:8000/media/somefolder/amO3N9pP/someusers/jEARG7xb/someassignments/amO3N9pP/1/file-sample_1MB.doc&embedded=true You said If it's not a url to a publicly available .doc file, so how can I do it so ? Appreciate your effort. Thanks in advance – Aniket Yadav Sep 26 '20 at 05:48
  • `localhost` isn't publicly available, so the google servers wouldn't be able to download the file to display it to you – TKoL Sep 28 '20 at 08:12

0 Answers0