TTC
Theo's Typesafe Cult•8mo ago
Răzvan

ERROR: UPLOADTHING No slug provided in params: {}

Hello guys, I am working on an web app that integrates an image uploader, so I stumbled upon uploadthing, and implemented it with a Dragger UI from ANTD Design ("antd": "^5.16.4"), but when upload image event happens the uploadthing returns error 
⨯ UPLOADTHING 13:03:16  No slug provided in params: {}
⨯ UPLOADTHING 13:03:16  No slug provided in params: {}
From the docs I was unable to solve this, so maybe someone else can help me with some information. I'am gonna leave the code from each file that I am using for this implementation in the comments because i'am crossing out the Discord maximum message length. thank you for your time and answear in advance
1 Reply
Răzvan
RăzvanOP•8mo ago
@/app/api/ingestImage/core.ts 
import {createUploadthing, type FileRouter} from "uploadthing/next";
import {UploadThingError} from "uploadthing/server";
import {auth} from "@/auth";
import * as z from "zod";

const f = createUploadthing();

// FileRouter for your app, can contain multiple FileRoutes
export const ourFileRouter = {
    // Define as many FileRoutes as you like, each with a unique routeSlug
    imageUploader: f({image: {maxFileSize: "16MB", maxFileCount: 1}})
        .input(z.object({foo: z.string()}))
        // Set permissions and file types for this FileRoute
        .middleware(async ({req}) => {
            // Check if the app is authorized to upload
            if (!req.headers.get('authorization') || req.headers.get('authorization') !== `Bearer ${process.env.APP_API_KEY}`) throw new Error("Authorization token is required");

            // Session is the user's session, if they are logged in
            const session = await auth();

            // Check if the user is authorized to upload
            if (!session) throw new UploadThingError("Unauthorized");

            // Whatever is returned here is accessible in onUploadComplete as `metadata`
            return {userId: session?.user?.id, name: session?.user?.name};
        })
        .onUploadComplete(async ({metadata, file}) => {
            // Get the URL of the uploaded image
            const imageUrl = file.url;
            // TO DO:
          
            // !!! Whatever is returned here is sent to the clientside `onClientUploadComplete` callback
            return {uploadedBy: metadata.userId};
        })
} satisfies FileRouter;

export type OurFileRouter = typeof ourFileRouter;
import {createUploadthing, type FileRouter} from "uploadthing/next";
import {UploadThingError} from "uploadthing/server";
import {auth} from "@/auth";
import * as z from "zod";

const f = createUploadthing();

// FileRouter for your app, can contain multiple FileRoutes
export const ourFileRouter = {
    // Define as many FileRoutes as you like, each with a unique routeSlug
    imageUploader: f({image: {maxFileSize: "16MB", maxFileCount: 1}})
        .input(z.object({foo: z.string()}))
        // Set permissions and file types for this FileRoute
        .middleware(async ({req}) => {
            // Check if the app is authorized to upload
            if (!req.headers.get('authorization') || req.headers.get('authorization') !== `Bearer ${process.env.APP_API_KEY}`) throw new Error("Authorization token is required");

            // Session is the user's session, if they are logged in
            const session = await auth();

            // Check if the user is authorized to upload
            if (!session) throw new UploadThingError("Unauthorized");

            // Whatever is returned here is accessible in onUploadComplete as `metadata`
            return {userId: session?.user?.id, name: session?.user?.name};
        })
        .onUploadComplete(async ({metadata, file}) => {
            // Get the URL of the uploaded image
            const imageUrl = file.url;
            // TO DO:
          
            // !!! Whatever is returned here is sent to the clientside `onClientUploadComplete` callback
            return {uploadedBy: metadata.userId};
        })
} satisfies FileRouter;

export type OurFileRouter = typeof ourFileRouter;
@/app/api/ingestImage/route.ts 
import { createRouteHandler } from "uploadthing/next";

import { ourFileRouter } from "@/app/api/ingestImage/core";
// Call another API that sends the image url to replicate API

export const { GET, POST } = createRouteHandler({
    router: ourFileRouter,
    config: {
        isDev: (process.env.NODE_ENV === "development"),
        logLevel: "debug",
    },
});
import { createRouteHandler } from "uploadthing/next";

import { ourFileRouter } from "@/app/api/ingestImage/core";
// Call another API that sends the image url to replicate API

export const { GET, POST } = createRouteHandler({
    router: ourFileRouter,
    config: {
        isDev: (process.env.NODE_ENV === "development"),
        logLevel: "debug",
    },
});
@/components/uploader/FileUploader.tsx 
"use client";

import React from 'react';
import {InboxOutlined} from '@ant-design/icons';
import type {UploadProps} from 'antd';
import {message, Upload} from 'antd';
import {redirect} from "next/navigation";
const {Dragger} = Upload;

const props: UploadProps = {
    name: 'file',
    multiple: false,
    method: 'POST',
    headers: {
        Authorization: `Bearer ${process.env.APP_API_KEY}`
    },
    action: '/api/ingestImage',
    onChange(info) {
        const { status } = info.file;

        // - Log the file and file list
        if (status !== 'uploading') console.log(info.file, info.fileList);

        if (status === 'done') {
            // - Add a success message
            message.success(`${info.file.name} file uploaded successfully.`);
            // - Retrieve the story id from the response
            const { storyId } = info.file.response;
            // - Redirect to the story page with the story id
            redirect(`/dashboard/story/${storyId}`);
        } else if (status === 'error') {
            // - Add an error message
            message.error(`${info.file.name} file upload failed.`);
        }
    },
    onDrop() {
        // - Log the event
        message.info('Upload started');
    },
};

const FileUploader = () => {
    return (
        <>
            <Dragger {...props}>
                <div className="py-5">
                    <p className="ant-upload-drag-icon">
                        <InboxOutlined />
                    </p>
                    <p className="ant-upload-text">Click or drag file to this area to upload</p>
                    <p className="ant-upload-hint px-5">
                        Support for a single. Strictly prohibited from uploading company data or other
                        banned files.
                    </p>
                </div>
            </Dragger>
        </>
    );
};

export default FileUploader;
"use client";

import React from 'react';
import {InboxOutlined} from '@ant-design/icons';
import type {UploadProps} from 'antd';
import {message, Upload} from 'antd';
import {redirect} from "next/navigation";
const {Dragger} = Upload;

const props: UploadProps = {
    name: 'file',
    multiple: false,
    method: 'POST',
    headers: {
        Authorization: `Bearer ${process.env.APP_API_KEY}`
    },
    action: '/api/ingestImage',
    onChange(info) {
        const { status } = info.file;

        // - Log the file and file list
        if (status !== 'uploading') console.log(info.file, info.fileList);

        if (status === 'done') {
            // - Add a success message
            message.success(`${info.file.name} file uploaded successfully.`);
            // - Retrieve the story id from the response
            const { storyId } = info.file.response;
            // - Redirect to the story page with the story id
            redirect(`/dashboard/story/${storyId}`);
        } else if (status === 'error') {
            // - Add an error message
            message.error(`${info.file.name} file upload failed.`);
        }
    },
    onDrop() {
        // - Log the event
        message.info('Upload started');
    },
};

const FileUploader = () => {
    return (
        <>
            <Dragger {...props}>
                <div className="py-5">
                    <p className="ant-upload-drag-icon">
                        <InboxOutlined />
                    </p>
                    <p className="ant-upload-text">Click or drag file to this area to upload</p>
                    <p className="ant-upload-hint px-5">
                        Support for a single. Strictly prohibited from uploading company data or other
                        banned files.
                    </p>
                </div>
            </Dragger>
        </>
    );
};

export default FileUploader;
Want results from more Discord servers?
Add your server