Failing to make a POST request from ReactJS to Django - django

Question

Hello so I am working on a Django and React project I am fairly new to the domain I can't understand why this is not working, so I would love to make a POST request to my API and save the contents to the database and the after then the function that is currently working to retrieve contents in my DB will do its work to update the website.
So after I made the POST request this is the response I get when I console logged:
Response { type: "cors", url: "http://127.0.0.1:8000/api/upload-lecture/", redirected: false, status: 200, ok: true, statusText: "OK", headers: Headers, body: ReadableStream, bodyUsed: false }
I personally thought after getting a status code of 200 everything is fine but when I go check the database the is nothing new that was added.
I even checked the with Django logs that were coming and this is what I got too:
"POST /api/upload-lecture/ HTTP/1.1" 200 108
So I do not understand why the contents are not in the database.
Code to my Api: Upload method:
#api_view(['POST'])
def videoUpload(request):
serializer = LectureVideosSerializer(data=request.data)
if serializer.is_valid():
serializer.save()
return Response(serializer.data)
Code to React:This is where I was trying to make the POST request
import React, { useState } from 'react';
const VideoUploadForm = () =>{
const [lecturer, setLecturer] = useState('');
const [module, setModule] = useState('');
const [video, setVideo] = useState();
const [date, setDate] = useState('');
const newVideo = () =>{
const uploadData = new FormData();
uploadData.append('lecturer', lecturer);
uploadData.append('module', module);
uploadData.append('video', video);
uploadData.append('date', date);
fetch('http://127.0.0.1:8000/api/upload-lecture/', {
method:'POST',
body:uploadData
}).then(response => console.log(response)).catch(error => console.log(error))
}
const handleLecturer = (e) =>{
setLecturer({
lecturer: e.target.value
})
}
const handleModule = (e) =>{
setModule({
module: e.target.value
})
}
const handleVideo = (e) =>{
setVideo({
video: e.target.files[0]
})
}
const handleDate = (e) =>{
setDate({
date: e.target.value
})
}
return(
<div className="form__container">
<label>
Lecturer:
<input type="text" onChange={handleLecturer} placeholder="Lecturer uploading"/>
</label>
<label>
Module:
<input type="text" onChange={handleModule} placeholder="Module of Video Uploaded"/>
</label>
<label>
Video:
<input type="file" onChange={handleVideo}/>
</label>
<label>
Date:
<input type="text" onChange={handleDate} placeholder="YY-mm-dd"/>
</label>
<button onClick={() => newVideo()}>Upload Video</button>
</div>
)
}
export default VideoUploadForm;
This is the error that I am getting when I print out the serializers errors
[*] Error:{'video': [ErrorDetail(string='The submitted data was not a file. Check the encoding type on the form.', code='invalid')], 'date': [ErrorDetail(string='Date has wrong format. Use one of these formats instead: YYYY-MM-DD.', code='invalid')]}
How can I resolve this

Answer 1

For the date make sure you have the format mentioned in the error,for file upload,I usually use MultiPartParser,you can set that up using a parser_classes decorator.