'Django Nextjs post method "Unhandled Runtime Error"

I am currently building my first project on Django + Next.js, but I have a problem when I try to create an object from the front. I have a form that allows me to create a "post" when I submit it. Everything works fine in the backend, I can see my new posts in my /admin dashboard. However, on the front end I get an error : Unhandled Runtime Error

Unhandeled runtime error

My front code where I believe the error comes from :

const CreationForm = () => {
    const router = useRouter();

    const [creator, setCreator] = useState('Anonymous Creator');
    const [slug, setSlug] = useState('');
    const [title, setTitle] = useState('');
    const [photo_main, setPhoto_main] = useState(null);
    const [description, setDescription] = useState('');

    const onSlugChange = e => setSlug(e.target.value);
    const onTitleChange = e => setTitle(e.target.value);
    const onFileChange = e => setPhoto_main(e.target.files[0]);
    const onDescriptionChange = e => setDescription(e.target.value);


    const [loading, setLoading] = useState(false);

    const handleSubmit = async e => {

        e.preventDefault();
        setLoading(true);
        const config = {
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'multipart/form-data',
            }
        };

        const formData = new FormData();
        formData.append('title', title);
        formData.append('slug', slug);
        formData.append('creator', 'Anonymous Creator');
        formData.append('description', description);
        formData.append('photo_main', photo_main);

        const body = formData;

        try {
            const res = await axios.post('http://localhost:8000/api/posts/create', body, config);

            if (res.status === 201) {
                setLoading(false);
                router.push('/dashboard');
            }
        } catch(err) {
          setLoading(false)
        }
    
    };

    return (
    <Layout>
    .
    .
    .
    </Layout>
    );
}

export default CreationForm;

I tried quite hard to find the answer on my own but I am lost now.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source