Filename appending random string at the end of filename after upload

[ankitjasbeersingh]

While uploading the file I'm getting wrong content-type I'm uploading pdf file and when upload completes it append a random string to the filename and can I upload file from file without route directly with creating route

const fileIdToUploadTo = uuidv4(); 
const newBlob = await upload(`users/${user.id}/files/${fileIdToUploadTo}`, file, {
        access: 'public',
        handleUploadUrl: '/api/file/upload',
        onUploadProgress(e) {
            setStatus(StatusText.UPLOADING)
            setProgress(e.percentage);
        }
      });

my api route api/file/upload/route.ts

import { handleUpload, type HandleUploadBody } from '@vercel/blob/client';
import { NextResponse } from 'next/server';
 
export async function POST(request: Request): Promise<NextResponse> {
  const body = (await request.json()) as HandleUploadBody;
 
  try {
    const jsonResponse = await handleUpload({
      body,
      request,
      onBeforeGenerateToken: async (
        pathname
      ) => {
        return {
          tokenPayload: JSON.stringify({
          }),
        };
      },
      onUploadCompleted: async ({ blob, tokenPayload }) => {
        console.log('blob upload completed', blob, tokenPayload);
      },
    });
 
    return NextResponse.json(jsonResponse);
  } catch (error) {
    return NextResponse.json(
      { error: (error as Error).message },
      { status: 400 }, // The webhook will retry 5 times waiting for a 200
    );
  }
}