Multipart form parse error - Invalid boundary in multipart: None content-type issue?

Question

I am working on simple CRUD with react and react-redux and having trouble with POST in client side
BoardList.js

import React, { Component, Fragment } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { getBoards, deleteBoard, addBoard } from "../../actions/boards"

export class BoardList extends Component {
    static propTypes = {
        boards: PropTypes.array.isRequired,
        getBoards: PropTypes.func.isRequired,
        deleteBoard: PropTypes.func.isRequired,
        addBoard: PropTypes.func.isRequired
    }
    componentDidMount() {
        this.props.getBoards();
    }
    shouldComponentUpdate(nextProps, nextState){
        return this.props.boards !== nextProps.boards
    }
    render(){
        return (
            <Fragment>
                <h2>Boards</h2>
                <table className="table table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Author</th>
                            <th>Title</th>
                            <th>Created</th>
                            <th>Updated</th>
                            <th />
                        </tr>
                    </thead>
                    <tbody>
                        {this.props.boards.length > 0 && this.props.boards.map(board => (
                            <tr key={board.id}> 
                             // Uncaught TypeError: Cannot read property 'id' of undefined
                                <td>{board.id}</td>
                                <td>{board.author}</td>
                                <td>{board.title}</td>
                                <td>{board.created}</td>
                                <td>{board.updated}</td>
                                <td>
                                    <button 
                                      className="btn btn-danger btn-sm"
                                      onClick={this.props.deleteBoard.bind(this, board.id)}
                                      >
                                      Delete</button>
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </Fragment>
        )
    }
}

const mapStateToProps = state => ({
    boards: state.boards.boards,
})

export default connect(mapStateToProps, {getBoards, deleteBoard, addBoard})(BoardList)

reducers/boards.js

import { GET_BOARDS, DELETE_BOARD, ADD_BOARD } from "../actions/types.js";

const initialState = {
    boards : []
}

export default function(state=initialState, action) {
    switch (action.type) {
        case GET_BOARDS:
            return {
                ...state,
                boards: action.payload
            }
        case DELETE_BOARD:
            return {
                ...state,
                boards:state.boards.filter(board => board.id !== action.payload)
            }
        case ADD_BOARD:
            return {
                ...state,
                boards:[...state.boards, action.payload]
            }
        default:
            return state;
    }
}

actions/boards.js

export const addBoard = board => (dispatch, getState) => {
    const token = getState().users.token;
    const config = {
        headers: {
            'Content-Type': undefined   //I suspect this is wrong
        }
    if(token){
        config.headers["Authroization"] = `Token ${token}`
    }
    axios
      .post("api/boards/",board, tokenConfig(getState))
      .then(res=> {
          dispatch(createMessage({ addBoard: "Board added"}));
          dispatch({
              type:ADD_BOARD,
              payload: res.data
          })
      })
      .catch(err => dispatch(returnErrors(err.response.data, err.response.status)));
}

I know this error message is related to django rest framework, however I can POST it through the Postman. So I think it is my Content-Type issue.(If I am wrong, please correct me) At very first time, I thought django rest framework pass json, so I used application/json. then I got The submitted data was not a file. Check the encoding type on the form. I also used multipart/form-data and undefined then I get Multipart form parse error - Invalid boundary in multipart: None error.

How can I handle this issue?

Answer 1

// **This is solve from my project**


  export const Get_user_profile=(data)=>new Promise((re, rej)=>{
    const  usertoken ={
        'Content-Type': 'application/json',
        'Authorization':`Bearer ${Cookies.get('access_token')}`
        } 
    const  get_profile=async()=>{
        await axios({
          
            method: 'post',
            url:`http://127.0.0.1:8000/api/v1/User_profile/`,
            headers: {
                'Authorization':`Bearer ${Cookies.get('access_token')}`,
                'Content-Type': 'multipart/form-data'
              },
            data:data,
             })
        .then(response =>{     
            re(response)
        }).catch(error=>{
        rej(error)
        })    
      }  
      get_profile() 
})
  
  
  
   //===============data==
  const profile_pic=useRef()
  let formData = new FormData()
    formData.append('profile_pic', profile_pic.current.files[0])
    
 //===============send request=========================  
   Get_user_profile(formData).then(response=>{
        var val=[response.data]
        val.map(x=>{
          dispatch(User_profile(x))
        })
        toast.success("Sucessfully update");
      }).catch(error=>{
        toast.error(error.request);
        console.log(error.request)
      }) 
    
    

Answer 2

    let formData = new FormData()
    formData.append('userPhotos', file)
    formData.append('your_field', your_data)
    formData.append('your_field', your_data)
    formData.append('your_field', your_data)

    axios({
        withCredentials: true,
        url: 'your_url',
        method: 'POST',
        data: formData
    })