Add downloads and file storage to your site with Filestack

Filestack is a service that simplifies the process of enabling file downloads on a website or app. Whether you’re getting resumes, adding profile picture support, or accepting submissions for an art contest, Filestack can help.

But Filestack is more than just a front-end component, it’s also a complete back-end service for file storage. You can access the files using the HTTP API or one of the available SDKs. Read below to find out how Filestack can simplify your file upload needs

What is FileStack?

file stack is part service, part product. It has two main elements:

  1. A front-end UI component that enhances default HTML file input.
  2. A back-end service for content storage and delivery.

The combination of the two makes Filestack a particularly powerful service. The file picker widget is a nice tool to have, and the powerful backend support for file uploads further eases the developer experience when managing complex file upload pipelines.

Filestack is more relevant if you are running a site without a backend server. For static sites especially, the full support for file uploads is a big plus.

A front-end file picker

You can get the smallest amount of features in minutes. Starts with sign up for Filestack free. Without paying anything, you get the following each month:

  • Bandwidth: 1.0 GB
  • Downloads: 500
  • Processing: 1,000
  • File stack storage: 1.0 GB

Once logged into your account, access your File Stack Dashboard. It displays your API key in the top right corner, next to a button that copies it to your clipboard. Your API key is vital as you will use it to identify your account when you integrate the service.

You can now add a simple default file picker to your site. Here is an example of HTML code that creates a minimal working example:

Note that you can reference the main JavaScript file from Filestack’s domain, so you don’t even need to upload it to your server. Open this page in your browser and try the file picker. The picker includes support for drag-and-drop file uploads:

A file is dragged from the file manager to the Filestack component in a web browser.

You can even upload files from sources other than your computer, including Google Drive, Instagram, and web search:

A Filestack selector displaying image search results for the word

The file downloader also supports basic image editing features such as cropping and rotating:

A Filestack selector cropping an image of a penguin into a circle outline.

A back-end web service

Once you’ve tested the basic file picker, check out the content browser in the Filestack backend. You’ll see the file(s) you downloaded, along with commands to download or delete them. Each file also has a direct link through a Content Delivery Network (CDN). Filestack incorporates support for a CDN, allowing you to display content to your site visitors with greater efficiency.

Filestack's web app content browser displays a newly uploaded penguin image file.

Analytics are available to help you track bandwidth and downloads over time. This is useful if you regularly use the service and need to monitor usage.

There’s also a full file upload API, allowing you to build even more advanced functionality. Discover all File stack documentation for more details.

Come for the Picker, Stay for the File Upload API

Filestack is a useful mix of front-end downloader and back-end file storage. You can use it with a static site to provide download functionality that would otherwise be impossible.

We hope you like the items we recommend and discuss! MUO has affiliate and sponsored partnerships, so we receive a revenue share from some of your purchases. This will not affect the price you pay and helps us provide the best product recommendations.

chromecast problems

Chromecast buffering and stuttering? 7 tips to fix choppy streams

Read more

About the Author