But Filestack is more than just a front-end component, it’s also a full back-end service for file storage. You can access 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?

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

A front-end UI component that improves upon the default HTML file input. 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 most relevant if you’re managing a site without a server backend. For static sites in particular, full support for file uploads is a big benefit.

A Front-End File Picker

You can get the smallest amount of functionality working within minutes. Start by signing up for Filestack for free. Without paying anything, you get the following each month:

Bandwidth: 1. 0 GB Uploads: 500 Transformations: 1,000 Filestack storage: 1. 0 GB

Once you’ve logged into your account, go to your Filestack dashboard. It shows your API key in the top-right corner, alongside a button that copies it to your clipboard. Your API key is vital because you’ll use it to identify your account when you integrate the service.

Now you can add a simple default file picker to your site. Here’s some sample HTML that creates a minimal working example:

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

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

The file uploader also supports basic image editing features like cropping and rotating:

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’ve uploaded, along with controls to download or delete them. Each file also has a direct link via a content delivery network (CDN). Filestack builds in support for a CDN, so you can display the content to your site’s visitors with greater efficiency.

Analytics are available to help you track bandwidth and uploads over time. This is useful if you’re making regular use of the service and need to monitor usage.

There’s also a full file upload API, allowing you to build even more advanced functionality. Check out the comprehensive Filestack documentation for more details.

Come for the Picker, Stay for the File Upload API

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