We hope to create a preview of attachments in gmail format using angularjs functions

Question

I have a requirement when I want to show a file preview to users.

There are various types of files that are supported as; .pdf, .xlsx, .doc, .rar, .jpeg, .png and many others.

When the user clicks on the preview, he should open the file in a pop-up window where he will be shown a preview of the file. The user can scale, reduce, download the file. Just as you can see in gmail to preview attachments.

Please, can you direct me to any appropriate library or useful resource for the same.

Thank you in advance

Answer 1

There are two main ways to do this.

1) On the server side: rendering the preview on the server side (when downloading the file) to jpg / png images and saving the previews on the server. This is easiest to implement on the client side, but requires additional storage on the server.

2) Client side: visualize the live preview using javascript in the browser, this reduces the amount the server needs to do / store, but requires the client to fully load the file in memory before it can display the Preview, which is for large files may be a problem. In addition, you will need javascript libraries for each specific file type, since most libraries will focus on one specific file format.

Perhaps the server version is the recommended way. What do you use for your web server?

Answer 2

You are looking at creating a document viewer.

Amaze me with your great work, as the browser does not understand these formats. The browser can display images directly on the canvas, but it does not know how to display other files. Thus, any file other than image formats must be temporarily stored on the server, and then transferred to the browser and displayed using the appropriate file viewer.

You can convert the doc and xlsx files to pdf and display these files using the pdf viewer ( http://ngmodules.org/modules/ng-pdfviewer ). There are many document converters available on the Internet (however, you will need to check the licensing conditions, since most of them are licensed by the GPL, and hense cannot be used in commercial projects).

If you want to keep this work, go to a third-party server, which will take all the paint to convert documents to html5, for example https://crocodoc.com/why-crocodoc/

You can also try using google doc viewer google doc veiwer

Answer 3

This question is pretty broad. I do not perform all the steps to implement the attachment view directive, but here are some pointers that may come in handy.

So that the user can upload the file, you simply add a download link. If you host the application on Amazon S3, Google Cloud Storage, or other cloud storage, check their documentation. If you download files from your server, be sure to set the Content-Disposition HTTP response header << 21>, where ORIGINAL_FILENAME is the name of the file that you want to see in the save dialog box that appears when they click the download link.

Now for the viewer.

For PDF files, I would use pdfJS. There is an angular directive for here .

You can look at something like CloudConvert for other files to convert ehm to PDF and then display them in pdfJS format, but then you probably want to also save the PDF file on your server, in addition to the source files that require additional storage. You can also use the Google Document Viewer or Office 365 Viewer as described in this answer .