Getting Started

Why Filestack?

Since 2012, Filestack has been perfecting the technology behind file uploading, transformations, and delivery. Some key benefits include:

  • Speed and reliability behind Filestack’s worldwide file infrastructure. Accelerate your website’s upload and download speeds with expert file power.
  • Ease of implementation means that you can spend your time focusing on your core product, while we handle your files.
  • An entire international team of developers supporting you of your file needs.

Getting Started Guide

You’ll need an API Key to get started with Filestack. If you don’t have one, you can sign-up for a free account here.

Once you have your API key, hold onto it because we are going to use it in the first step.

This guide will walk you through how to use Filestack’s JavaScript library, to start uploading, transforming, and delivering files in minutes.

If you would prefer to use an SDK instead of a script tag to call the picker please select your preferred technology below:


Basic Filestack Picker Implementation

Filestack provides an out of the box file uploading widget that will connect to your user’s local drive, Facebook, Instagram, Google Drive, Dropbox, and Web Image Search. Once implemented, you can further customize your file picker with many parameters.

To integrate Filestack into your website, the first thing to do is include the Filestack Javascript library. Copy and paste this script into your tag in your HTML file.

Now, you can initialize Filestack using the filestack.init() function with your API key in the body of any HTML file. If you lost track of your API key, you can log into your Dev Portal to find it again:

Now you can run the file picker to start uploading files. Shown below is a basic implementation of Filestack, in which the file picker is launched with the options to accept a single image file.

You can replace the API key in the JS section with your own (make sure it is a string) and test out parameters here:


More About Your Filelink

You’ll notice that after you uploaded a file, you were returned with a URL. This URL is referred to as a “FileLink.” Each FileLink is composed of Filestack’s CDN URL and a unique file handle. A FileLink delivers each file you upload through Filestack’s CDN.

You can use the filelink in your tag to display the asset on your website. For example, you can add this to your HTML body:

Your filelink is also your key to transforming your file. Filestack’s Processing Engine provides trillions of combinations to manipulate your file, whether it is an image, audio/video file, or document.

Let’s run through a few basic examples together.


Dynamic File Transformation

Image Processing

You likely noticed that you were able to do some basic image transformations before uploading your file.

You can further modify your image by using transformation parameters in the FileLink

To transform an image, Filestack follows a defined structure:

https://cdn.filestackcontent.com/ transformation parameters /filestack handle

For example, to resize your image to 48px, we can simply use the URL:

Filestack generated link
https://cdn.filestackcontent.com/resize=width:48/2h25ZGRHTfmQ2DBEt3yR

Similarly, we can round the corners of the image using the parameter rounded_corners

Filestack generated link
https://cdn.filestackcontent.com/resize=width:48/rounded_corners/2h25ZGRHTfmQ2DBEt3yR

Let’s now filter the image to make it look like like a monochrome with the parameter monochrome

Filestack generated link
https://cdn.filestackcontent.com/resize=width:48/rounded_corners/monochrome/2h25ZGRHTfmQ2DBEt3yR

As you see, we can chain multiple conversions together within the URL. Filestack offers many more ways to process images, including cropping, enhancing, image tagging, facial detection and more.

For more options, please see our full documentation page on Image Processing →


Document Conversions

Filestack’s document conversion engine allows you to convert between file extensions, get information about a document, change the document display, and more. The document transformation architecture mirrors the image transformation architecture:

https://cdn.filestackcontent.com/ transformation parameters /filestack handle

For example, to convert an ODF file to a PNG, you can call:

https://cdn.filestackcontent.com/output=format:pdf/AxnRSaLRL2fERM9C2aGk

To convert a DOC file to TXT you can call:

https://cdn.filestackcontent.com/output=format:txt/3i0kHfrRXyGHg9StS8zf

To convert an AI file to PNG, you can call:

https://cdn.filestackcontent.com/output=format:png/KDlswo4WTx4DSyRTqNbw

To convert a DOC file to TXT you can call:

https://cdn.filestackcontent.com/output=format:txt/3i0kHfrRXyGHg9StS8zf

To convert an AI file to PNG, you can call:

https://cdn.filestackcontent.com/output=format:png/KDlswo4WTx4DSyRTqNbw

And to get PDF information, you can call:

https://cdn.filestackcontent.com/output=docinfo:true/dQogyFzRzOe6YCV8WWaL

For more options, see our full documentation page on Document Conversions →


Audio/Video Transcoding

Audio/ Video transformations are useful for resizing videos, cropping length, converting between formats are more. You will use the same URL architecture as with image and document transformations, now with a video_convert parameter.

For example, to resize a video, you could call:

Filestack generated link
https://cdn.filestackcontent.com/video_convert=height:260,width:300,preset:webm/yGBPzL8OTuWKxguxU6uS

And to watermark a video, you could call:

Filestack generated link
https://cdn.filestackcontent.com/video_convert=watermark_url:dnzia6KSvZLN7bQUJMQI,watermark_top:10,watermark_right:50,preset:webm/XF4vy6kRFCw5tSGuXADg

For more options and information on how to display the video or audio file, see our full documentation page on Video Transcoding →


Customize Your File Picker

Now that you have a basic understanding of Filestack’s uploading and image processing applications, let’s go back to the file picker we made above and customize it with some options.

In the first example, we only accepted images. Now, let’s adjust the file upload to accept document, video,and audio mimetypes as well. We could write this each out individually, like accept: ['image/*', 'video/*', …], or we can just remove this parameter completely, to accept all mimetypes.

In the first example, we restricted the number of files to only 1. Filestack defaults to uploading one file at a time, but supports unlimited multi-file uploads. The maximum file limit is easy to change when configuring the uploader. (Need 365 uploads for a custom calendar? No problem!). However, 365 files seems like a lot for our example, so let’s set our maxFiles to 3.

For the first example, we left in the default cloud sources, which include local uploads, facebook, Google Drive, Instagram, Dropbox, and Google Search. Filestack provides 20+ cloud integrations, so let’s add a couple more, Webcam and Github. When you start modifying the sources our defaults are overwritten, so make sure you add back the default sources.

Finally, let’s set a max file size. This is calculated in bytes, so you’ll need a tiny bit of math. If we want our files limited to 1 MB we can use 1048576 bytes or 1024*1024 like this:

Open your returned filelinks in new windows to see them.

For more options to customize your file picker please see our pages on our JavaScript Library →


Advanced Customization Options

Now that you understand the basics, there are more advanced ways to configure your file uploading process. You can store your files with Filestack by default, but we also offer the option to use your own cloud storage such as Amazon S3, Google Cloud Storage, Microsoft Azure, Rackspace and Dropbox.

In addition to custom storage options we also offer the ability to include security policies on each and every upload.

You can include webhooks in your site to be notified in real time about your uploader, and you can enable caching in multiple ways.

To find out more, click over to our docs:


Learn More

Congratulations for completing this guide! You now understand the basics of uploading, processing, storing and delivering files with Filestack. The rest of the Filestack documentation will go further in depth to help you build powerful file ingestion and delivery into your application. Filestack’s support team is always just an email away at support@filestack.com. We are happy to take questions and help you implement Filestack.