Support for image/file uploads

Hello!

We widely use trpc.io and we love it! One use case that recently popped up is being able to use other request content types like multipart/form-data. Is that currently supported by the library? I’m wondering if it’d be just a custom link.

Thank you so much for maintaining this great library.

[mesmerlord]

I’m guessing this is for uploading files, I’ve had similar issues. First I tried just base64 encoding the image/file , but next seems to have a limit of 4mb for files which is often not enough. Then I went and tried to just create an API endpoint outside of tRPC to just allow multipart file uploads using multer, but wasn’t having much success with it either. In the end I went with a sort of hybrid approach, using tRPC endpoint to receive filename, filetype, user info etc, then using S3 to create a signedUrl(with expiration, content type limit, and file size limit) only for authenticated users, then users can use that link to directly upload to S3 bucket. Works great

If my guess is right, you only used trpc router endpoint just to get signedurl and you uploaded the file directly to the signedurl from the client using fetch/axios(put), right?

UPDATE: Saw your example at https://github.com/mesmerlord/bazosClone/blob/main/src/components/listingsAdd/DropImage.tsx#L88

Yep and on the server side its : https://github.com/mesmerlord/bazosClone/blob/7c60dce17d626b6a4f2eb375eb3b23ffc7cac076/src/server/routers/photos.ts#L18

Hope you found it useful.

[KATT]

FYI you can do this to circumvent the 4mb limit:

import { createContext } from 'server/context';
import { appRouter } from 'server/routers/_app';
import * as trpcNext from '@trpc/server/adapters/next';


export default trpcNext.createNextApiHandler({
  router: appRouter,
  /**
   * @link https://trpc.io/docs/context
   */
  createContext,
  // [...]
});

/**
 * @link https://nextjs.org/docs/api-routes/api-middlewares#custom-config
 */
export const config = {
  api: {
    bodyParser: {
      sizeLimit: '20mb',
    },
  },
};