WHY FILESTACK? BLOG SUPPORT

Sign Up Free
Log In

Secure File Uploads

Filestack security policies provides easy way to implement authentication and authorization mechanisms. By implementing these security measures, you can maintain control over file uploads, enhancing the overall security and integrity of your application.

Sign Up Free
Plans & Pricing

How to secure file uploads:

  1. Enable Security Policies: By default, Filestack apps don’t have security enabled, meaning write access is effectively public. You should enable the security option in your Filestack Developer Portal.
  2. Protect Your Secret Key: The secret key used for signing policies should never be exposed client-side. Instead, generate and sign policies on the backend.
    Filestack uses Base64URL-encoded JSON policies and HMAC-SHA256 signatures to authenticate requests. The policy defines what actions are authorized, and the signature verifies the policy. Policies should have short expiries and limited scopes to prevent unauthorized access.
  3. Fetch Policy & Signature Securely: In your frontend code, request the policy and signature from your backend before initializing the File Picker.
  4. Filestack authenticate actions:
    1. Policy Verification: Filestack decodes the policy and checks if the requested action is permitted.
    2. Signature Validation: Filestack recomputes the signature using the provided policy and compares it with the received signature. If the signatures match, the request is authenticated.
    3. Action Execution:
      1. If authentication succeeds, Filestack allows the requested action (e.g., opening the File Picker, uploading a file).
      2. If authentication fails (e.g., expired policy, invalid signature), the request is rejected.

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.

Edit 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.

Sign Up Free
Plans & Pricing

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