Upload Files
Upload images and documents to the media library.
Updated
On this page
Overview
Upload files (images, documents) to the DashForDevs CDN. Uploaded files get a permanent URL for use in products, blog posts, reviews, and more.
SDK Usage
import dash from "@/lib/dash"
// Upload single file
const { success, url, filename, size } = await dash.upload.file(fileObject, {
onProgress: (percent) => console.log(`${percent}% uploaded`),
})
// Upload multiple files
const results = await dash.upload.files([file1, file2, file3], {
onFileProgress: (index, percent) => console.log(`File ${index}: ${percent}%`),
onOverallProgress: (percent) => console.log(`Overall: ${percent}%`),
})
Check Allowed File Types
// Check if a file is allowed
const { allowed, reason } = await dash.upload.isAllowed("photo.jpg")
// Get full list
const allowed = await dash.upload.getAllowedExtensions()
// ["jpg", "jpeg", "png", "gif", "webp", "pdf", ...]
const blocked = await dash.upload.getBlockedExtensions()
// ["exe", "bat", "cmd", ...]
File Upload Component
"use client"
import { useState } from "react"
import dash from "@/lib/dash"
export function FileUploader({ onUploaded }) {
const [uploading, setUploading] = useState(false)
const [progress, setProgress] = useState(0)
async function handleChange(e) {
const file = e.target.files[0]
if (!file) return
setUploading(true)
const { url } = await dash.upload.file(file, {
onProgress: setProgress,
})
setUploading(false)
onUploaded(url)
}
return (
<div>
<input type="file" onChange={handleChange} disabled={uploading} />
{uploading && <p>Uploading... {progress}%</p>}
</div>
)
}
REST API
POST /storefront/upload
X-API-Key: pk_live_your_key
Content-Type: multipart/form-data
# Include file as form data
Next Steps
- Image URLs & CDN — How CDN works
- File Size Limits — Upload restrictions
- Submit Review — Uploading review photos