Problems posting images from react to Django Rest API using redux - django

Question

I'm trying to post an image in my Django API from a react form with no luck. I'm also using the image uploader from AntDesign library and redux.
Here's the code I've tried so far:
-Form Code:
class ArticleForm extends React.Component {
this.props.onSendNewArticle(
fieldsValue.upload.fileList[0].originFileObj);
render() {
<Form.Item
name="upload"
label="Image"
onPreview={this.handlePreview}>
<Upload accept=".jpeg, .png" beforeUpload={() => false}>
<Button>
<UploadOutlined /> Choisir une image
</Button>
</Upload>
</Form.Item>
}
const mapStateToProps = (state) => {
return {
loading_add_article: state.add_article.loading_add_article,
error_add_article: state.add_article.error_add_article,
};
};
const mapDispatchToProps = (dispatch) => {
return {
onSendNewArticle: (image) =>
dispatch(actions.articleAdded(image)),
};
};
export default connect(mapStateToProps, mapDispatchToProps)(CourseForm);
-Here's my view.py
class ArticleCreateView(APIView):
parser_classes = (MultiPartParser, FormParser)
def post(self, request, *args, **kwargs):
article_serializer = ArticleSerializer(data=request.data)
if article_serializer.is_valid():
article_serializer.save()
return Response(article_serializer.data, status=status.HTTP_201_CREATED)
else:
print('error', article_serializer.errors)
return Response(article_serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-Here's my store/actions/addArticle.js:
export const articleAdded = ( image) => {
return (dispatch) => {
dispatch(articleDispached);
axios
.post("http://localhost:8000/api/create/", {
img: image
})
.then((res) => {
const course = res.data;
dispatch(articleAddSucess(course));
})
.catch((err) => {
dispatch(articleAddFailed(err));
});
};
};
Here's the error that I get:
POST http://localhost:8000/api/create/ 415 (Unsupported Media Type)

Answer 1

export const articleAdded = ( image) => {
return (dispatch) => {
dispatch(articleDispached);
axios
.post("http://localhost:8000/api/create/", {
img: image
headers: { "content-type": "multipart/form-data" },
})
.then((res) => {
const course = res.data;
dispatch(articleAddSucess(course));
})
.catch((err) => {
dispatch(articleAddFailed(err));
});
};
};