Django Rest Frameworkにアップロード画面からデータを追加したい。

Question

前提・実現したいこと

ReactとDjangoで簡単な記事投稿アプリを作っています。
Reactで作成した記事投稿フォームに入力するとDjangoの方にデータが追加され、記事が追加される機能を実装したいです。

発生している問題・エラーメッセージ

最後にアップロードボタンを押しても記事が投稿されずに困っています。何か問題点や解決点を下さればありがたいです。

Reactコード

イメージとしては記事投稿フォームに入力された値をState値として保持し、　定義したaddArticle関数でDjango Rest Frameworkにデータを追加するという構想です。

import './Post.css';
import axios from 'axios';
// import Posts from './Posts';
import React, {useState,useEffect} from 'react';
import './Posts.css';
// import Avatar from '@material-ui/core/Avatar';
// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
// import { faHeart } from '@fortawesome/free-solid-svg-icons';
import Posts from './Posts';
import HomeIcon from '@material-ui/icons/Home';
import SearchIcon from '@material-ui/icons/Search';
import AddBoxIcon from '@material-ui/icons/AddBox';
import FavoriteIcon from '@material-ui/icons/Favorite';
import Avatar from '@material-ui/core/Avatar';
import Add from './Add';
import {Button,Input} from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import Modal from '@material-ui/core/Modal';



function getModalStyle() {
    const top = 50 ;
    const left = 50 ;
  
    return {
      top: `${top}%`,
      left: `${left}%`,
      transform: `translate(-${top}%, -${left}%)`,
    };
  }
  
  const useStyles = makeStyles((theme) => ({
    paper: {
      position: 'absolute',
      width: 400,
      backgroundColor: theme.palette.background.paper,
      border: '2px solid #000',
      boxShadow: theme.shadows[5],
      padding: theme.spacing(2, 4, 3),
    },
  }));




function Post () {
    
     const [articles , setArticles] = useState([]);
     const [openUpload, setOpenUpload] = useState(false);
     const [modalStyle] = useState(getModalStyle);
     const classes = useStyles();
     const [image, setImage] = useState(null);
     const [content, setContent] = useState('');
     const [name, setName] = useState('');



     useEffect(() => {

        axios.get('http://127.0.0.1:8000/api/')
            .then( res => {
                const articles = res.data.map((article) => ({
                    name: article.name,
                    content: article.content,
                    id: article.id,
                    image : article.image,
                  }));
                  setArticles(articles);
                console.log(res.data);
                
            })

    })




       const addArticle = (content, name, image) => {
        let form_data = new FormData();

        if(image){
          form_data.append('image', image);
        }

        form_data.append('content', content);
        form_data.append('name', name);

        axios.post('http://127.0.0.1:8000/api/', form_data,{headers: {
                'content-type': 'multipart/form-data'
            }
         }).then(res => {
            window.location.href="/";
        }).catch(err => {
            console.log(err);
        });
    }



   const handleSubmit = (event) => {
        event.preventDefault();
        
        setContent('')
        setImage(null)
        setName('')
        
        addArticle(name, content, image);
    }


    const nameChange = (event)=> {
        setName(event.target.value,)
    }

    const contentChange = (event)=> {
        setContent(event.target.value,)
    }

    const handleChange = (e) => {
        if(e.target.files[0]) {
           setImage(e.target.files[0]);
        }
      };




        
    

        return(

            <div className="app">

           <Modal
            open={openUpload}
            onClose={() => setOpenUpload(false)}
            >
            <div style={modalStyle} className={classes.paper}>
            <form className="app_sighup">
                <center>
                <img
                className="app_headerImage"
                src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png"
                alt=""
                />
                </center>
                <Input
                type="text"
                placeholder="Enter a name...."
                value={name} onChange={nameChange}
                />
                <Input
                type="text"
                placeholder="Enter a caption...."
                value={content} onChange={contentChange}
                />
                <Input
                type="file"
                onChange={handleChange}
                />
                <Button type="submit" onClick={handleSubmit}>Uploade</Button>
                </form>
            </div>
            </Modal>
                



            <div className="app_header">
                    <img
                        className="app_headerImage"
                        src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png"
                        alt=""
                    />
            </div>
            <div className="app_posts">
            {articles.map(({name,content,id,image}) => (
             <Posts id={id} name={name} content={content} image={image}/>
              ))
            }
            </div>
            <div className="app__footer">
            {/* <div className="app__center"> */}

                <HomeIcon className="footer_green"/>
                <SearchIcon className="footer_icon"/>
                <AddBoxIcon  className="footer_icon" onClick={() => setOpenUpload(true)}/>
                <FavoriteIcon  className="footer_icon"/>
                <Avatar
                    className="post_avatar"
                    alt="Gafe"
                    src="/static/images/avatar/1.jpg"
                />
            {/* </div> */}
            </div>
            </div>
            
        
        )
    
} 

export default Post;

Djangoで作成したapi

詳細

初歩的な質問で申し訳ないですが、お力を貸していただけたらと思います。