Add file previews to your website
Link any file you host, and your visitors open it right in their browser, with nothing to install. There's no script to embed and no account, and the file goes straight from your server to their screen.
How it works
Three steps, once for your site. After that, every file you link opens in Filepeek.
- 1
Allow Filepeek
Add one header to the server that hosts your files, so your visitor's browser may read them for Filepeek.
Access-Control-Allow-Origin: https://filepeek.io - 2
Create the link
Put the file's address after filepeek.io/#, in base64url.
https://filepeek.io/#aHR0cHM6Ly9leGFtcGxlLm… - 3
Link it
Put it next to your download button. It opens in a new tab.
<a href="https://filepeek.io/#…" target="_blank">Preview</a>
Allow Filepeek on your server
Your visitor's browser downloads the file for Filepeek, so your server has to allow it. Send the header on error pages too, so an expired link says so.
location /files/ {
add_header Access-Control-Allow-Origin "https://filepeek.io" always;
add_header Access-Control-Expose-Headers "Content-Disposition" always;
}<IfModule mod_headers.c>
Header always set Access-Control-Allow-Origin "https://filepeek.io"
Header always set Access-Control-Expose-Headers "Content-Disposition"
</IfModule>example.com {
@files path /files/*
header @files Access-Control-Allow-Origin "https://filepeek.io"
header @files Access-Control-Expose-Headers "Content-Disposition"
}When URI Path starts with /files/
Set Access-Control-Allow-Origin https://filepeek.io
Set Access-Control-Expose-Headers Content-Disposition[
{
"AllowedOrigins": ["https://filepeek.io"],
"AllowedMethods": ["GET", "HEAD"],
"ExposeHeaders": ["Content-Disposition"],
"MaxAgeSeconds": 3600
}
]
// Behind CloudFront? Add the managed CORS-S3Origin origin request policy.[
{
"origin": ["https://filepeek.io"],
"method": ["GET", "HEAD"],
"responseHeader": ["Content-Disposition"],
"maxAgeSeconds": 3600
}
]
// gcloud storage buckets update gs://your-bucket --cors-file=cors.json[
{
"AllowedOrigins": ["https://filepeek.io"],
"AllowedMethods": ["GET", "HEAD"],
"ExposeHeaders": ["Content-Disposition"],
"MaxAgeSeconds": 3600
}
]Allowed origins https://filepeek.io
Allowed methods GET, HEAD
Exposed headers Content-Disposition
Max age 3600/files/*
Access-Control-Allow-Origin: https://filepeek.io
Access-Control-Expose-Headers: Content-Disposition{
"headers": [
{
"source": "/files/(.*)",
"headers": [
{ "key": "Access-Control-Allow-Origin", "value": "https://filepeek.io" },
{ "key": "Access-Control-Expose-Headers", "value": "Content-Disposition" }
]
}
]
}<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="https://filepeek.io" />
<add name="Access-Control-Expose-Headers" value="Content-Disposition" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>For public files, * works in place of https://filepeek.io. A link that redirects to another host needs * on that host.
Create links in your code
The link is filepeek.io/# and the file's full address in base64url, the URL-safe kind with no = at the end.
const link = 'https://filepeek.io/#' + btoa(new URL(fileUrl).href)
.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');$link = 'https://filepeek.io/#' . rtrim(strtr(base64_encode($fileUrl), '+/', '-_'), '=');link = "https://filepeek.io/#" + base64.urlsafe_b64encode(file_url.encode()).rstrip(b"=").decode()const link = 'https://filepeek.io/#' + Buffer.from(fileUrl).toString('base64url');link = "https://filepeek.io/#" + Base64.urlsafe_encode64(file_url, padding: false)link := "https://filepeek.io/#" + base64.RawURLEncoding.EncodeToString([]byte(fileURL))var link = "https://filepeek.io/#" + Convert.ToBase64String(Encoding.UTF8.GetBytes(fileUrl))
.TrimEnd('=').Replace('+', '-').Replace('/', '_');String link = "https://filepeek.io/#" + Base64.getUrlEncoder().withoutPadding()
.encodeToString(fileUrl.getBytes(StandardCharsets.UTF_8));What your visitors see
Filepeek downloads the file in their browser, then opens it like any file they drop on the page.
Your files stay between you and your visitors
- Files go straight from your server to your visitor
- Filepeek never sees the file or its address
- Nothing in a file runs, not scripts and not macros
- No cookies or sign-ins are sent along
Questions
Is it free?
Yes. There is no account and no key, and every link you create works for every visitor.
Can I show Filepeek inside my page?
No. Filepeek opens in its own tab, so your visitors get the whole viewer with zoom, search and saves.
Do signed links work?
Yes. Signed S3, R2, Google Cloud Storage and Azure links work while they're valid. The address stays in your visitor's browser, so Filepeek never sees the signature.
Do files behind a sign-in work?
No. The browser sends no cookies with the download, so a file that needs your visitor to be signed in won't come. Signed links work instead.
Which files open?
Any of the 412 supported file types, from PDF, Word and Excel to camera raws, CAD drawings, 3D models and archives.
How big can a file be?
As big as the free space in your visitor's browser. Filepeek checks the size first and says so when a file won't fit.
Does it cost me bandwidth?
Each preview downloads the file once, just like your download button.
Does it work on phones?
Yes. Links open in every modern browser, on phones and tablets too.
What if my server doesn't send the header?
Your visitor sees "Couldn't get this file" with a button that downloads it from your site instead.