File sharing is a common requirement across many types of applications, from internal tools and client portals to full-featured SaaS products. While the concept is straightforward, implementing it well requires handling uploads, generating shareable links, delivering files globally, and optionally supporting real-time image transformations.This guide walks through building a complete file-sharing application using Filestack for uploads, storage, CDN delivery, and image processing.What We’re BuildingA user visits your app, drops a file, and gets back a short link. Anyone with that link can preview, download, or view the file. If the file is an image, they can apply transformations like blur, crop, grayscale, and rounded corners, then copy the transformed URL, all without any server-side image processing code.What you’ll have at the end:Drag-and-drop file upload with real-time progressUnique shareable short link per fileImage previews with on-the-fly transformationsStackLayerTechnologyFrameworkNext.js (App Router)File upload & CDNFilestackDatabaseTurso (edge SQLite)ORMDrizzle ORMLanguageTypeScriptIf you don’t want to use Turso, any SQL database works. The schema is a single table.Step 1: Get Your Filestack API KeySign up at Filestack (there’s a generous free tier). Once you have an account, grab your API key from the dashboard. If you’re new to Filestack, the Quick Start guide walks you through the basics in a few minutes.NEXT_PUBLIC_FILESTACK_API_KEY=your_api_key_hereFilestack handlesstorage on S3 and serves files through a global CDN. You don’t configure buckets or manage infrastructure. It just works.Step 2: Set Up Your DatabaseWe’re using Turso, a distributed SQLite database that runs at the edge. In development, it uses a local .dbfile, so there’s no cloud setup needed to get started. Follow the Turso quickstart to get set up, then add your credentials to your environment:TURSO_DATABASE_URL=libsql://your-db.turso.ioTURSO_AUTH_TOKEN=your-auth-tokenOnce that’s done, define the schema. You only need one table:// lib/db/schema.tsimport { sqliteTable, text, integer, index } from "drizzle-orm/sqlite-core";export const shares = sqliteTable( "shares", { id: text("id").primaryKey(), code: text("code").notNull().unique(), // The short URL code /s/abc123 handle: text("handle").notNull(), // Filestack file handle url: text("url").notNull(), // Full Filestack CDN URL filename: text("filename").notNull(), mimetype: text("mimetype").notNull(), size: integer("size").notNull(), views: integer("views").notNull().default(0), createdAt: integer("created_at").notNull(), // Unix ms timestamp fingerprint: text("fingerprint").notNull().default(""), }, (t) => [ index("shares_code_idx").on(t.code), index("shares_fingerprint_idx").on(t.fingerprint), ]);The equivalent SQL, if you prefer to see it plainly:CREATE TABLE shares ( id TEXT PRIMARY KEY, code TEXT NOT NULL UNIQUE, handle TEXT NOT NULL, url TEXT NOT NULL, filename TEXT NOT NULL, mimetype TEXT NOT NULL, size INTEGER NOT NULL, views INTEGER NOT NULL DEFAULT 0, created_at INTEGER NOT NULL, fingerprint TEXT NOT NULL DEFAULT '');CREATE INDEX shares_code_idx ON shares(code);CREATE INDEX shares_fingerprint_idx ON shares(fingerprint);Run npx drizzle-kit push to create the table on Turso.Step 3: Upload Files Directly to FilestackYou can use the Filestack File Picker for a drop-in upload UI, or use one of the official SDKs (JavaScript, React, Angular, Python, and more). For this project, we went with a plain XHR call to the Store API to get native progress events:async function uploadToFilestack( file: File, apiKey: string, onProgress: (percent: number) => void,) { return new Promise( (resolve, reject) => { const xhr = new XMLHttpRequest(); const params = new URLSearchParams({ key: apiKey, filename: file.name }); xhr.open("POST", `https://www.filestackapi.com/api/store/S3?${params}`); xhr.setRequestHeader("Content-Type", file.type || "application/octet-stream"); xhr.upload.onprogress = (evt) => { if (evt.lengthComputable) { onProgress(Math.round((evt.loaded / evt.total) * 100)); } }; xhr.onload = () => { if (xhr.status >= 200 && xhr.status < 300) { resolve(JSON.parse(xhr.responseText)); } else { reject(new Error(`Upload failed: ${xhr.status}`)); } }; xhr.onerror = () => reject(new Error("Network error")); xhr.send(file); } );}Filestack responds with a URL like this:https://cdn.filestackcontent.com/AbCdEfGh1234567890abThat last segment is the handle. Save it. You’ll use it to build transformation URLs later.function extractHandle(url: string): string { return url.replace("https://cdn.filestackcontent.com/", "").split("?")[0];}Step 4: Save the Share to Your DatabaseAfter the upload succeeds, call your own API route to save the metadata and generate a short shareable code:// app/api/share/route.tsimport { NextResponse } from "next/server";import { nanoid } from "nanoid";import { db, schema } from "@/lib/db";export async function POST(req: Request) { const { handle, url, filename, mimetype, size } = await req.json(); if (!/^https:\/\/cdn\.filestackcontent\.com\//.test(url)) { return NextResponse.json({ error: "Invalid URL" }, { status: 400 }); } const id = nanoid(); const code = nanoid(10); await db.insert(schema.shares).values({ id, code, handle, url, filename, mimetype, size, createdAt: Date.now(), }); return NextResponse.json({ code });}The client then redirects the user to /s/{code}, where the share page lives.Step 5: The Share PageWhen someone opens /s/abc123, look up the record and render the file preview:// app/s/[code]/page.tsxasync function getShare(code: string) { const rows = await db .select() .from(schema.shares) .where(eq(schema.shares.code, code)) .limit(1); return rows[0];}Bump the view count while you're at it:async function bumpViews(id: string) { await db .update(schema.shares) .set({ views: sql`${schema.shares.views} + 1` }) .where(eq(schema.shares.id, id));}For the preview itself, check the MIME type and render accordingly. Images get an tag, PDFs can use Filestack’s Document Viewer, and videos get a element. Filestack’s CDN handles delivery for all of them.Step 6: On-The-Fly Image TransformationsOnce a file is uploaded, you can transform it by changing the URL. No server-side image processing, no extra libraries.Filestack’s Processing API supports resize, crop, rotate, filters, and more. Transformations are chained as URL segments:TransformationURLResize to 300pxhttps://cdn.filestackcontent.com/resize=width:300/HANDLESquare crophttps://cdn.filestackcontent.com/resize=width:300,height:300,fit:crop/HANDLEGrayscalehttps://cdn.filestackcontent.com/monochrome/HANDLEBlurhttps://cdn.filestackcontent.com/blur=amount:8/HANDLESepiahttps://cdn.filestackcontent.com/sepia=tone:80/HANDLERounded cornershttps://cdn.filestackcontent.com/rounded_corners=radius:30/HANDLEPolaroid effecthttps://cdn.filestackcontent.com/polaroid/HANDLERotate 90°https://cdn.filestackcontent.com/rotate=deg:90/HANDLEYou can chain them. Here’s a grayscale, rounded-corners thumbnail in a single URL:https://cdn.filestackcontent.com/resize=width:300/monochrome/rounded_corners=radius:30/HANDLEFilestack also offers a Transformations UI if you want to give users a visual editor instead of building your own. And for video/audio, there’s a dedicated Video and Audio Processing API.What Else Can You Build With This?Once Filestack is hooked up, the same pattern can power a lot more:ProductHowUser profile avatarsUpload, crop, resize, then save the handle to the user recordE-commerce product imagesUpload once, generate any size variant via the URLClient document portalUpload files and serve them from short, access-controlled linksVideo hosting (MVP)Upload MP4, serve directly via Filestack CDN with a tagImage-heavy blog CMSEditors upload once, and the frontend requests the right size per breakpointDeploy ChecklistBefore going live:NEXT_PUBLIC_FILESTACK_API_KEY set in your hosting environmentTURSO_DATABASE_URL and TURSO_AUTH_TOKEN are set for productionnpx drizzle-kit push run against your production Turso databaseFilestack Security Policies are configured to restrict file types and sizes at the API levelFurther ReadingIf you want to go deeper, here are some good next steps:TopicLinkGetting started with FilestackQuick StartHow Filestack works under the hoodHow Filestack WorksFile Picker (drop-in upload UI)File PickersGenerate a picker with no codePicker Code GeneratorAll image and file transformationsProcessing API ReferenceVideo and audio processingVideo & Audio APIAI features (tagging, OCR, virus scan)IntelligenceAutomate file workflowsWorkflowsSDKs (JS, React, Python, Go, etc.)Framework SDKsSecurity and access controlSecurity PoliciesStep-by-step tutorialsTutorialsBlog and more use casesFilestack BlogFinal ThoughtsThe thing that makes Filestack worth using isn’t just the upload API. Once a file is uploaded, you get CDN delivery and the Processing API included. You write zero image processing code, you manage zero storage infrastructure, and you can still deliver a rich experience from a single file handle.Try the live demo at fireshare-swart.vercel.app or grab the source code on GitHub.Start there, strip it down to your use case, and you’ll have something production-ready faster than you’d expect.