Stop building auth for file uploads

Use our security policy strings to control who can, what they can, and where they can upload. Set it once. It’s handled.

How To Secure Your File Uploads with Filestack

By default, your app has public write access. Here is how you lock it down.

1. Enable Security Policies. First, go to your Developer Portal and flip the security switch for your app.

2. Protect Your Secret Key. Your secret key is for your backend only. Use it there to generate and sign policies. It should never be exposed on the client-side.

3. Fetch the Policy Securely. In your frontend code, request the signed policy and signature from your backend before initializing the File Picker. A policy should always have a short expiration time.

We take it from there. We verify the signature on every request and check the policy’s rules. If the signature is invalid or the policy has expired, the request is rejected.

For a full implementation guide, check our our docs about security policies.

Try it yourself:

The below code shows how to handle security on the front-end supposing that the policy and signature is generated in the backend on an endpoint named get-filestack-credentials.

See the Pen Untitled by Filestack Marketing (@ffkocvzk-the-encoder) on CodePen.

HTML

CSS

#picker{
  height: 100vh
}

JavaScript

async function getFilestackCredentials() {
  const response = await fetch("/get-filestack-credentials");
  return response.json();
}

async function initFilePicker() {
  const credentials = await getFilestackCredentials();

  const clientOptions = {
    security: {
      policy: credentials.policy,
      signature: credentials.signature
    }
  };
  const apiKey = "YOUR_API_KEY";
  const client = filestack.init(apiKey, clientOptions);
  let pickerOptions = {
    displayMode: "inline",
    container: "#picker"
  };
  const picker = client.picker(pickerOptions).open();
}

initFilePicker();

Start building your own file upload solution today.

PREVIEW

Users can preview their uploaded files directly inside the File Picker.

CONNECT TO 20+ CLOUD DRIVES

Connect your app directly to AWS, Facebook, Dropbox, Instagram, and more.

PROGRESS BAR UPLOADS

Give your users confidence that their files are on the way to the right destination.

MULTI-FILE UPLOADS

Let your users upload multiple files at one time for speed and simplicity.

CUSTOM CSS

Filestack blends seamlessly into your website or app. Ask about white-labeling.

CLIENT-SIDE CROP

Users can crop files to perfection before sending them to your website or app.

UNLIMITED UPLOADING

Upload any file type, from any local or cloud source, at any scale.

WEBSITES & HTML

Filestack can even load web content from any public URL and capture the rendered page as an image. Perfect for generating screenshots, previews, or converting HTML-based content into other formats.

SECURE CLOUD STORAGE

Store uploads directly in your cloud storage for ease and accessibility.

"Being smart here, in my opinion, is seriously looking at Filestack to give you a fantastic uploading experience, while you spend your time on your product vision, not already-solved problems."

— CHRIS COYIER, FOUNDER OF CSS-TRICKS & CODEPEN