Filestack Viewer

The Filestack Viewer is a simple and easy way to view a large number of filetypes you normally wouldn't be able to look at directly in your web browser without loading any heavy plugins like Adobe Acrobat or another file viewer.

These are the types of files that can be opened using the preview endpoint:

  • PDF files (PDF)
  • Powerpoint files (PPT, PPTX)
  • Excel files (XLS, XLSX)
  • Word files (DOC, DOCX)
  • ODF word processing documents (ODT)
  • ODF presentation documents (ODP)
  • Image files (gif, tiff, jpg, jpeg, png)
  • HTML files
  • Plain text files
  • Adobe Illustrator and Adobe Photoshop files (AI, PSD)

If you try to open a file that is not supported using the preview endpoint, you will receive a 400 error and a message that the file cannot be converted.

Embedded Filepicker Viewer Widget

Here are some examples of the embedded viewer widget and the code used to make it work. Remember to integrate Filestack into your site first

An example of PPT file

<div type="filepicker-preview" data-fp-url="https://www.filestackapi.com/api/file/7cSeLSlZSmCk3k8CQtAv" style="width:75%; height:500px"> </div>

An example of PDF file

<div type="filepicker-preview" data-fp-url="https://www.filestackapi.com/api/file/koNcx8AGRpSwTi1rzNgd" style="width:75%; height:1000px"> </div>

An example of AI file

<div type="filepicker-preview" data-fp-url="https://www.filestackapi.com/api/file/KDlswo4WTx4DSyRTqNbw" style="width:75%; height:500px"> </div> 

You can also use your own CSS to customize the viewer (feel free to modify this default CSS file):

<div type="filepicker-preview" data-fp-url="https://www.filestackapi.com/api/file/7cSeLSlZSmCk3k8CQtAv" style="width:75%; height:500px" data-fp-custom-css="https://www.filestackapi.com/api/file/nOEVTFWT3KrXCKNCNEg7"> </div>

How to Use Filestack Viewer

The Filestack preview endpoint is easy to use. All you need is a file that matches one of the file types listed above, and the Filestack URL for that file. You can use one of the Pick examples to generate the Filestack URL for your file.

Here is the filestack url for an open office presentation file: https://www.filestackapi.com/api/file/UIkuJX9uR7eTMaqFuuGI. By default this file will prompt you to download it because it cannot be displayed by your web browser.

However, if you take the Filestack URL and change the endpoint from file to preview: https://www.filestackapi.com/api/preview/UIkuJX9uR7eTMaqFuuGI. The file will open in the file viewer.

The structure required to use the Viewer is like this:

        https://www.filestackapi.com/api/preview/[file_handle]
    

An example: https://www.filestackapi.com/api/preview/m5PywS1Rw2kPBhrDXptu

An example using custom CSS: https://www.filestackapi.com/api/preview/UIkuJX9uR7eTMaqFuuGI?css=https://www.filestackapi.com/api/file/nOEVTFWT3KrXCKNCNEg7

The viewer has many features including:

  • Print
  • Text search (Ctrl + F)
  • Zoom in and out
  • Skip between pages
  • Rotate pages (this does not edit the actual file)
  • Presentation mode
  • Download