Hope to create gmail attachment preview like functionality using angularjs

Question

I have a requirement where I want to show the file preview to the users.

There are various file types which are supported like; .pdf, .xlsx, .doc, .rar, .jpeg, .png and many more.

When user clicks on the preview it should open the file in popup where preview of the file is shown to him. User can Zoom-in, Zoom-out, Download the file. Just as you can see into gmail for attachment preview.

Please, can anyone guide me to any relevant library or helpful resource for the same.

Thanks in advance

Answer 1

There are two main ways you can do this.

1) Server-side: Render previews once server-side (on file upload) into jpg/png images, and store the previews on the server. This is the easiest to implement on the client side, but requires extra storage on the server.

2) Client-side: Render the previews 'live' with javascript in browser, this reduces the amount the server has to do/store, but does require the client to fully download the file in-memory before it can render the preview, which for large files could be an issue. Also, you would need javascript libraries included for likely each individual file type, since most libraries will target one specific file format.

Server-Side is probably the recommended way to go. What are you using for your web server?

Answer 2

You are looking at creating document viewer.

Belive me its big work as browser does not understand these formats. Browser can render images directly on canvas but it does not know how to render the other files. So, any file other than image formats, one need to save them temporarily on server and then stream on the browser and show them using the respective file viewer.

You can convert doc and xlsx files to pdf and show these files using pdf viewer (http://ngmodules.org/modules/ng-pdfviewer). There are plenty of document converters available on internet (however you will need to check the licensing terms as most of them are GPL licensed, hense can not be used in commercial projects).

If you want to save this work then go for third party server those take all paint to convert documents in html5 such as https://crocodoc.com/why-crocodoc/

You can also try using google doc viewer google doc veiwer