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:
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.
Note: The Filestack Library must be included on the page in order for Responsive Images to work.
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). All the colors in the below example have been replaced with #F00 (red):
<div type="filepicker-preview" data-fp-url="https://www.filestackapi.com/api/file/7cSeLSlZSmCk3k8CQtAv" style="width:75%; height:500px" data-fp-custom-css="https://cdn.filestackcontent.com/osFTk0ZQP2pGdjnR9NKf"> </div>
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:
The viewer has many features including:
Someone from our team will get back to you shortly.