Theo's Typesafe Cult•2d ago

UploadThing file accept type restriction

I'm trying to find how I can allow the <UploadButton /> to only accept images for example with extensions of (.png, .jpg ...etc). Because currently my users are able to upload .gif for example and I don't want to allow that. I searched the docs but there is nothing regarding image type restriction or acceptation. Unless I missed something...

Solution:

Thanks that solves it for me. However if I used this I wont be able to set maxFileSize and maxFileCount ```tsx...

Jump to solution

3 Replies

Sturlen•2d ago

you should be able to add a list of file types (also called MIME-types) in your Route Config in the file router. e.g. myUploadButton: f(["image/jpeg", "image/png"]) docs: https://docs.uploadthing.com/file-routes#route-config

File Routes - UploadThing Docs

File Routes is a core concept of UploadThing that defines what your users can upload

Solution

Kazz•2d ago

Thanks that solves it for me. However if I used this I wont be able to set maxFileSize and maxFileCount

profilePicture: f(['image/jpeg', 'image/png', 'image/avif', 'image/webp'])

// I wont be able to set these things now
imageUploader: f({ image: { maxFileSize: '1MB', maxFileCount: 1 } })

profilePicture: f(['image/jpeg', 'image/png', 'image/avif', 'image/webp'])

// I wont be able to set these things now
imageUploader: f({ image: { maxFileSize: '1MB', maxFileCount: 1 } })

KazzOP•2d ago

I solved it by checking the file size in the middleware

pictureRoute: f(['image/jpeg', 'image/png', 'image/avif', 'image/webp'])
  .middleware(async ({ files }) => {
    if (files[0].size > MAX_SIZE) throw new UploadThingError('FileSizeMismatch')
    return {}
  })

pictureRoute: f(['image/jpeg', 'image/png', 'image/avif', 'image/webp'])
  .middleware(async ({ files }) => {
    if (files[0].size > MAX_SIZE) throw new UploadThingError('FileSizeMismatch')
    return {}
  })

Gaming

Programming

UploadThing file accept type restriction

Did you find this page helpful?