Back to articles
UploadThing Has a Free API That Makes File Uploads in React Dead Simple

UploadThing Has a Free API That Makes File Uploads in React Dead Simple

via Dev.to ReactAlex Spinov

UploadThing is the file upload library built for TypeScript. It handles presigned URLs, validation, and storage — so you just define what files you accept. Define Upload Routes import { createUploadthing , type FileRouter } from " uploadthing/next " ; const f = createUploadthing (); export const uploadRouter = { imageUploader : f ({ image : { maxFileSize : " 4MB " , maxFileCount : 4 } }) . middleware ( async ({ req }) => { const user = await auth ( req ); if ( ! user ) throw new Error ( " Unauthorized " ); return { userId : user . id }; }) . onUploadComplete ( async ({ metadata , file }) => { console . log ( " Upload complete: " , file . url ); await db . insert ({ userId : metadata . userId , fileUrl : file . url }); }), csvUploader : f ({ " text/csv " : { maxFileSize : " 16MB " } }) . middleware ( async () => ({ uploadedAt : new Date () })) . onUploadComplete (({ file }) => { console . log ( " CSV uploaded: " , file . name , file . size ); }), documentUploader : f ({ pdf : { maxFileS

Continue reading on Dev.to React

Opens in a new tab

Read Full Article
3 views

Related Articles