I getSyntaxError: No number after minus sign in JSON at position 1

Question

I am tying to work with the replicate model visoar/product-photo:edf42659dae0da88a26dba4912e7e4bb6c2fba25b1e1c6a5464cf220e467bce0, but when i provide him with an image and a prompt like that in page.tsx:

"use client"

import { LandingNavBar } from '@/components/landing-navbar';
import React, { useState, ChangeEvent, FormEvent } from 'react';
import axios from 'axios';
import { Card, CardFooter } from '@/components/ui/card';
import { Download } from 'lucide-react';

const ProductPhoto = () => {
  const [selectedImage, setSelectedImage] = useState<File | null>(null);
  const [prompt, setPrompt] = useState<string>('');
  const [images, setImages] = useState<string[]>([]);

  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    setSelectedImage(file || null);
  };

  const handlePromptChange = (e: ChangeEvent<HTMLInputElement>) => {
    setPrompt(e.target.value);
  };

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();

    try {
      const formData = new FormData();

      if (selectedImage) {
        formData.append('promptimg', selectedImage);
      }
      
      formData.append('prompt', prompt);

      setImages([]);
      const response = await axios.post("/api/image", formData);

      console.log(response.data);
      setImages(response.data);

      // Handle the response as needed
      console.log(response.data);

    } catch (error) {
      // Handle errors here
      console.error('Error:', error);
    }
  };

  return (
    <div>
      <LandingNavBar />
      <div className="mt-[30px]">
        <h1 className="text-6xl text-white  mb-[50px]">Upload your photo</h1>
        <form onSubmit={handleSubmit}>
          <input
            name="promptimg"
            className="block text-sm text-white border border-gray-300 rounded-lg cursor-pointer bg-transparent dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
            type="file"
            onChange={handleFileChange}
          />
          <input
            name="prompt"
            className="block text-sm border border-gray-300 rounded-lg cursor-pointer text-black mt-6"
            type="text"
            placeholder="Background description"
            value={prompt}
            onChange={handlePromptChange}
          />

          <button
            type="submit"
            className="text-white bg-gradient-to-r from-sky-400 via-cyan-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mt-6"
          >
            Submit
          </button>
        </form>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5 mt-8">
            {images.map((src) => (
              <Card key={src} className="rounded-lg overflow-hidden">
                <div className="relative aspect-square">
                  <img alt="image" src={src} width={500} height={500} />
                </div>
                <CardFooter
                  className="p-2 bg-slate-400 h-10"
                  onClick={() => window.open(src)}
                >
                  <Download className="block m-auto w-20 " />
                </CardFooter>
              </Card>
            ))}
          </div>
    </div>
  );
};

export default ProductPhoto;

Here is my api endpoint:

import { NextResponse } from 'next/server';
import { auth } from '@clerk/nextjs';
import Replicate from "replicate"

const replicate = new Replicate({
    auth: process.env.REPLICATE_API_TOKEN!,
})

export async function POST(req: Request) {
  try {
    const { userId } = auth();
    const body = await req.json();
    const { prompt } = body;
    const { promptimg } = body; 

    if (!userId) {
      return new NextResponse('Unauthorized', { status: 401 });
    }

    if (!prompt) {
      return new NextResponse('Prompt is required', { status: 400 });
    }

    const response = await replicate.run(
        "visoar/product-photo:edf42659dae0da88a26dba4912e7e4bb6c2fba25b1e1c6a5464cf220e467bce0",
        {
          input: {
            image_path: promptimg, 
            prompt: prompt,
          }
        }
    );

    return NextResponse.json(await response);
  } catch (error) {
    console.error('[IMAGE ERROR]', error);
    return new NextResponse('Internal error', { status: 500 });
  }
}

I am getting this error SyntaxError: No number after minus sign in JSON at position 1 and I don't really understand it I have worked with replicate and nextjs the same way before and It has never given me this error , can somebody help me?

Answer 1

When you use "form-data" the information is sent as multipart/form-data and not as application/json.

The error you get is because you are trying to parse JSON data in your route. But the data it received isn't in JSON format.

To fix this: Parse the content as formdata in your route, like:

 const formData = await req.formData();

And then you can get specific content like:

const selectedImage = formData.get('promptimg');