Filestack Viewer: The Crocodoc Alternative

As Crocodoc is brought to EOL by Box, the smart Crocodoc alternative is the Filestack Viewer. You are most likely reading this because of issues related to Crocodoc, and before we get started, we want to say that we understand your frustration. Delivering a reliable and useful document viewer is an essential component of your business’ user experience; however, it is most definitely not something you want to be spending your time on.

At the end of the day, a document viewer should never take focus away from improving your business’ core product. Filestack is not the “end all be all” solution to this problem, but our document viewer paired with a best in industry developer team will take all of the worries off your plate.

Let’s get started.

Why This Crocodoc Alternative?

Filestack’s document viewer is completely redesigned to render documents beautifully within your application and website. With a fully responsive user experience, documents are rendered in the most appealing way to the readers, no matter the resolution or the device used.  Supporting a wide variety of formats, Filestack’s document viewer is the best way to display your documents, images and more in your apps

If you were already using CrocoDoc to display any of your files stored in AWS S3, GCS, Microsoft Azure Dropbox and don’t want to move them, or re upload masses of existing assets, Filestack Storage Aliases and our file preview method have you covered. Here is a solution that will save you time, resources, and still deliver all of your files in the format that your customers need.

Getting Started

The first step is to sign up for Filestack’s Storage Alias Service. You will need to have access to the specific details of the storage source you are linking to. The Storage Alias creation process is covered for each storage source in our documentation here: https://www.filestack.com/docs/delivery/storage_aliases For the purposes of this tutorial we will look at AWS S3 storage in particular.

Find your S3 Access Key and Key Secret. This information is provided in a CSV download when the bucket is created, so if you are accessing existing stored assets in your S3 the setup process assumes you already have the Access Key and Key Secret stored.

If you are looking for information on how to set up Storing to a brand new S3 bucket with Filestack that documentation is located here: https://www.filestack.com/docs/cloud-storage/s3

Enter your Access Key and Secret Access Key as well as the bucket name and region.

Choose a name for your Alias. This can be something like ‘mysite-fs-links’

Path is an optional parameter. If it is not set the path will be ‘/’, with the alias included it would look like ‘mysite-fs-links/filename.ext’ . If path is set to something such as ‘doc-viewer’, this parameter becomes the default path for the alias files making the full path look like this: ‘mysite-fs-links/doc-viewer/filename.ext’

Click Test Settings to make sure the alias is working correctly.

Setting up the Viewer

Great! Now all we have to do is plug the alias file into the Filestack Viewer and we are good to go.

Preview can be opened directly in the browser using the following URL format for storage aliases:

https://cdn.filestackcontent.com/[Your_API_Key]/preview/src://mysite-fs-links/doc-viewer/filename.ext

Or for Filestack handles:

https://cdn.filestackcontent.com/preview/[Handle]

It can also be embedded directly into your website using the Filestack Javascript SDK:

https://github.com/filestack/filestack-js#clientpreviewhandle-options

For example with Storage Aliases:

const client = filestack.init(Your_API_Key);

client.preview('src://mysite-fs-links/doc-viewer/filename.ext', { id: 'previewId'});

Or a Filestack handle:

const client = filestack.init(Your_API_Key);

client.preview('ko0fdJ2Sy2iDnvCuFqjw',{ id: 'previewId'});

Tada!

By connecting the S3 bucket to Filestack’s Storage Alias system we have quickly and easily made all of our existing assets usable in the file viewer. That’s all there is to it.

If you’re looking to integrate with the simplest Crocodoc alternative out there, or just want to ask some questions, please don’t hesitate to get in contact.

Contact Sales

 

Happy Viewing.

Read More →