feat: More restrictive MIME types for better UX uploading images from Android

[oBusk]

Describe the feature you'd like to request

The UploadButton component creates a <input type="file"> which includes every image/* MIME in it's accept="", apparently because some OSes don't want to use image/*. Some of these mime types, causes Android to opt out of their "Cloud media app" flow, and instead of showing all images from your google Photos, to select a file instead.

File Selector	Cloud media

I tested a small thing https://image-mime-types.vercel.app/ and it seems like all MIME types with a period in them, triggers the file selection flow intead of the cloud media flow. Which honestly sounds like a bug in Android, but you know.

I was thinking how to work around this? Do I create add one config entry for each MIME I want to support? I also tried having the key in my FileRouter to be all mime types comma separated, which builds and creates a Upload button that's correct, but API gets sad when I upload.

I also was considering writing my own component so that I can specify a more restrictive "accepts" while using the "image" file route config.

But either way, I feel like the "out of the box" experience of uploadthing should be as smooth as possible? If you create upload of images, it shoul go into the image gallery path rather than "find a file on your phone".

Describe the solution you'd like to see

I think "UploadButton" component could recieve configuration to allow us to modify the accepts, but I also think that the default when using image in your File route, should exlcude all image types with periods in them. But if UploadThing don't want to build a work-around for an android/chrome bug(?) I also think that's fair.

Additional information

I've been trying to find information about what rules trigger the "Cloud media app" on android, but I honestly can't find any.. It's a case of unfortunate mix of buzz words...

👨‍👧‍👦 Contributing

• [X] 🙋‍♂️ Yes, I'd be down to file a PR implementing this feature!

[juliusmarminge]

hmm this is a weird one that I'm not quite sure how to solve in the best way... allowing overriding mime types sort of defeats the purpose of having a prebuilt component that manages the state for you, but I can see it being tempting as an escape hatch for these sort of edge cases

I also think that the default when using image in your File route, should exclude all image types with periods in them.

I don't think I agree with this one. Those mimes are valid image types, even if Android doesn't like that...

Will open this issue up for discussion and see if others have an opinion

[markflorkowski]

a potential workaround might include a configuration option in the router where you can specify an array of mime types, so that you would not have to make separate entries for each.

I could see this as another type of "magic" type for file routes:

...
 profileImage: f({
    custom: {
        mimes: ()=>[]
    },
  })
...

or as a restriction on existing magic types:

... 
  profileImage: f({
    image: {
      excludeMimes: ()=>[]
      maxFileSize: "4MB",
    },
  })
...

But either way, I feel like the "out of the box" experience of uploadthing should be as smooth as possible?

This is our north star on finding an acceptable solution here, so handling bugs in Android is "in scope" to some degree. Whatever solution we come to should not degrade the experience for everyone else though.

[oBusk]

An improved syntax to be able to configure entries for multiple MIME types like that would be a very nice way to be more flexible in the configuration, but would not mean optimal use-case out-of-the-box 😞 But maybe best option is to have a good way to configure MIME and a note in docs about the implications