Fairmount College Coursework, a demo we built to show the API, not a Filestack product. Filestack supplies the page image; the toolbar and the marks over it are application code.
Coursework Arrives From Any Device
A phone photo, a flatbed scan or a laptop PDF. Filestack’s picker drops into your own hand-in page and also reaches Google Drive and OneDrive.
Each upload returns a handle: the short ID Filestack files it under, and what every URL further down this page is built from.
The picker also opens Transformations UI before the upload finishes, so a student crops or straightens a phone photo of a handwritten page and Filestack stores the edited version. It is a marketplace add-on, switched on with transformationsUI: true, and the demo runs without it.
Four Steps From Set to Marked
The route the demo takes. Filestack stores the file on the way in, converts it for marking and serves every view of it. The class list, the due date and the score belong to the app.
How the Demo Annotates a Page
Filestack returns the submission as a page image. Your app puts an HTML canvas over that image and the lecturer draws on the canvas, so the pen, the highlighter and the tick are your app’s code, not a Filestack UI. The submission Filestack stores keeps the bytes the student uploaded.
The Marks Save as Their Own File
Saving uploads the app’s canvas to Filestack as a transparent PNG the size of the page. The submission gets one handle, the marks get another.
The browser stacks the two at display time, so the original is never rewritten and a mark can be cleared or redrawn.
The four files behind one marked submission in the demo.
Converting a PDF Page to an Image
A browser cannot draw on a PDF. Filestack reads the stored PDF for its page count, then converts any single page to a PNG on request, which is an image the app can put a canvas over.
page 1 of 2, converted from the stored PDF at density 150
The Page Is a URL
Filestack takes no build step and stores no second copy. You ask for a page or a thumbnail by writing the tasks into the URL in front of the handle. Filestack computes it on the first request and serves it from the edge cache after that.
"pages": 2,
"pagesize": { "paper": "A4", "width": 595.276, "height": 841.89 },
"encrypted": false,
"protected": false
}
Frequently Asked Questions
Can students hand in work from a phone?
Yes. The picker uploads photos, scans and PDFs from a phone or a laptop, and it also reaches Google Drive and OneDrive. Uploads are chunked and resumable, so a large scan survives a weak connection.
How do I convert a PDF page to an image?
A browser cannot draw on a PDF, so the Processing API converts a single page to a PNG when you ask for it. The page number is a task written into the URL, so page two is a different URL on the same stored file rather than a second upload.
Does marking change the student's original file?
No. Marking happens on an HTML canvas your app draws over the page image. Saving uploads that canvas to Filestack as a separate transparent PNG the size of the page, and the browser stacks the two at display time, so the original is never rewritten and a mark can be cleared or redrawn later.
How many pages can one submission have?
The page count comes back from pdfinfo on the stored PDF. The app requests and saves each page separately, so multi page documents are marked one page at a time.
Can the same file serve a phone and a laptop?
Yes. A thumbnail, a full page and a phone sized WebP are three transformation URLs on the same handle. Filestack computes each one on its first request and serves it from the edge cache from then on.
How is student work kept private?
Signed URLs and access policies scope a file to a user, a session or an expiry, so a submission URL does not work for anyone the policy does not name. Filestack publishes no FERPA, COPPA or HIPAA certification. Institutions that need specific terms named in the contract can request them through Filestack.
Does this work with an LMS like Canvas or Moodle?
Filestack ships no LMS plugin and no LTI tool. It is an HTTP API with SDKs, called from whatever code you already run, which is why the demo here is a standalone app. Filestack for EdTech covers integration across a platform; this page covers one mechanic inside it.