Using tRPC for uploading audio files

I want to create an api router in tRPC but am not sure if the following code is doable with tRPC. If yes can you point me to a resource where I can learn how to do it? 
import FormData from "form-data";
import { withFileUpload } from "next-multiparty";
import { createReadStream } from "fs";
import { type NextRequest, type NextResponse } from "next/server";

export const config = {
  api: {
    bodyParser: false,
  },
};

const handler = withFileUpload(async (req: NextRequest, res: NextResponse) => {
  const file = req.file;
  if (!file) {
    res.status(400).send("No file uploaded");
    return;
  }
  // Create form data
  const formData = new FormData();
  formData.append("file", createReadStream(file.filepath), "audio.wav");
  formData.append("model", "whisper-1");
  const response = await fetch(
    "https://api.openai.com/v1/audio/transcriptions",
    {
      method: "POST",
      headers: {
        ...formData.getHeaders(),
        Authorization: `...`,
      },
      body: formData,
    }
  );
  const { text, error } = await response.json();

  if (response.ok) {
    res.status(200).json({ text: text });
  } else {
    console.log("OPEN AI ERROR:");
    console.log(error.message);
    res.status(400).send(new Error());
  }
});

export default handler;
import FormData from "form-data";
import { withFileUpload } from "next-multiparty";
import { createReadStream } from "fs";
import { type NextRequest, type NextResponse } from "next/server";

export const config = {
  api: {
    bodyParser: false,
  },
};

const handler = withFileUpload(async (req: NextRequest, res: NextResponse) => {
  const file = req.file;
  if (!file) {
    res.status(400).send("No file uploaded");
    return;
  }
  // Create form data
  const formData = new FormData();
  formData.append("file", createReadStream(file.filepath), "audio.wav");
  formData.append("model", "whisper-1");
  const response = await fetch(
    "https://api.openai.com/v1/audio/transcriptions",
    {
      method: "POST",
      headers: {
        ...formData.getHeaders(),
        Authorization: `...`,
      },
      body: formData,
    }
  );
  const { text, error } = await response.json();

  if (response.ok) {
    res.status(200).json({ text: text });
  } else {
    console.log("OPEN AI ERROR:");
    console.log(error.message);
    res.status(400).send(new Error());
  }
});

export default handler;
N
Nick•418d ago
You can’t post files directly to a procedure in tRPC (yet) so it’s best to use a file host like S3 and generate an upload uri for the client to use
M
mozzius•418d ago
Either that or convert to base64 (worse option but technically possible)
More Posts
Enigmatic INTERNAL SERVER ERRORIm having a problem finding out about what is causing the INTERNAL SERVER ERROR from tRPC in my prodcreateProxySSGHelpers type errorHi all! Anyone know how to use createProxySSGHelpers with appropriate createContext typing?Can I force metadata with the createCaller?I have custom metadata which I check within the middleware. Im trying to write tests for this. CurreVitest error testHow can I test for specific TRPCError code with vitest? I managed to get the message but can't figurUsing generics duplicates the types instead of referring to the existing typesHi! I'm creating a backend API using TRPC, where I'm encountering a slight problem. TL;DR; when defSet custom header for fetchRequestHandlerIs this possible? currently getting cors issue. Trying to use nextjs's edge function with trpc.. ``