Add trpc + uploadthing integration and also some feature requests

[amkayondo]

Been working on a client project and I was trying to add upload thing but the docs are not clear on how to do it on the frontend

for the backend here is some code implementation i create

src\server\api\routers\upload.ts

import { createUploadthing, type FileRouter } from "uploadthing/next-legacy";
import { TRPCError } from "@trpc/server";
import { z } from "zod";
import {
  createTRPCRouter,
  publicProcedure,
  staffProcedure,
} from "~/server/api/trpc";
import { db } from "~/server/db";

const f = createUploadthing();

export const uploadRouter = createTRPCRouter({
  uploadFile: staffProcedure
    .input(
      z.object({
        file: z.any(),
        fileTag: z.string(),
      })
    )
    .mutation((opts) => {
      return f({ image: { maxFileSize: "4MB" } })
        .middleware(async ({ req, res }) => {
          // This code runs on your server before upload
          const file = await db.file.findFirst({
            where: {
              tag: opts.input.fileTag,
            },
          });

          // If you throw, the user will not be able to upload
          if (!file)
            throw new TRPCError({
              code: "NOT_FOUND",
              message: "file not found",
            });

          // Whatever is returned here is accessible in onUploadComplete as `metadata`
          return { fileTag: file?.tag };
        })
        .onUploadComplete(async ({ metadata, file }) => {
          // This code RUNS ON YOUR SERVER after upload
          console.log("Upload complete for userId:", metadata.fileTag);

          console.log("file url", file.url);
        });
    }),
});

src\server\api\root.ts

import { createTRPCRouter } from "~/server/api/trpc";
import { uploadRouter } from "./routers/upload";

/**
 * This is the primary router for your server.
 *
 * All routers added in /api/routers should be manually added here.
 */
export const appRouter = createTRPCRouter({
  upload: uploadRouter,
});

// export type definition of API
export type AppRouter = typeof appRouter;

the missing part is the frontend part while using nextjs

Feature Requests

• Ability to block direct access to the file, the download has to be signed so as to download it by the user

[markflorkowski]

Ability to block direct access to the file, the download has to be signed so as to download it by the user

We're working on this now! Its taking a bit longer than expected, but we know that this is an important feature for many of our users.

the missing part is the frontend part while using nextjs

The docs go over this, and there are also examples for both /pages and /app style Next projects in this repository:

• Pages
• App

Not sure exactly what you would be looking for regarding TRPC integration, but if you can explain your use case in a bit more detail, perhaps I can help.

[amkayondo]

The docs go over this, and there are also examples for both /pages and /app style Next projects in this repository:

• Pages
• App

Not sure exactly what you would be looking for regarding TRPC integration, but if you can explain your use case in a bit more detail, perhaps I can help.

how do you upload with a custom upload component or like access hooks like handleUpload

example

import { handleUpload } from "@uploadthing/next"

const { data, onSubmit, error, loading } = handleUpload()

const upload = (file) => {
return onSubmit(file)

}

[Mr0Bread]

For the custom component you can refer this doc section: https://docs.uploadthing.com/api-reference/react#useuploadthing For the server-side API helpers this one might be helpful: https://docs.uploadthing.com/api-reference/server#utapi

[amkayondo]

thank you @Mr0Bread 😁