How to parse XMLHttpRequest in Django - django

Question

I wanted to pass a file along with other text data from react to django and so I used the FormData() class and axios to post the request to DRF. The React code :
import React, { useEffect, useState } from "react";
import "../styling/AptitudeTest.css";
import Timer from "../components/Timer";
import { useNavigate, useLocation } from "react-router-dom";
import axios from "axios";
function AptitudeTest() {
const navigate = useNavigate();
const [lkdn, setLkdn] = useState("");
const [selectedFile, setSelectedFile] = useState();
const location = useLocation();
const [qs, setQs] = useState([]);
const onFileChange = (event) => {
setSelectedFile(event.target.files[0]);
};
useEffect(() => {
const data = async () =>
await axios
.get(`http://127.0.0.1:8000/comp/test/${location.state.id}`)
.then((res) => {
setQs(res.data.jsonData);
})
.catch((e) => console.log(e));
data();
}, []);
function submitHandler(e) {
e.preventDefault();
let c = 0,
total = 0;
var checkboxes = document.querySelectorAll("input[type=radio]:checked");
for (var i = 0; i < checkboxes.length; i++) {
c = c + parseInt(checkboxes[i].value);
total = total + 2;
}
let formData1 = new FormData();
formData1.append("Content-Type","multipart/form-data")
formData1.append(
"cid",
JSON.parse(localStorage.getItem("uData"))["cand_email"]
);
formData1.append("testid", location.state.id);
formData1.append("linkedin", "asasdads");
formData1.append("score", Math.ceil((c * 100) / total));
formData1.append("cv", selectedFile);
formData1.append("compid", location.state.compid);
axios
.post("http://localhost:8000/cand/response/",formData1)
.then((res) => {
navigate("/records2");
})
.catch((err) => {
console.log(err);
});
}
return (
<div className="container">
<h4 className="tit">J.P Stan and Co. - Data Analyst</h4>
<Timer hours="0" minutes="60" />
<form onSubmit={submitHandler}>
{qs.map((q) => {
return (
<div className="c card">
<div className="ch card-header">{q.question}</div>
<div className="card-body">
<input
type="radio"
id={"option1"}
name={q.question}
value={q.option1.marks}
/>
<label htmlFor={q.question}> {q.option1.title} </label>
</div>
<div className="card-body">
<input
type="radio"
id={"option2"}
name={q.question}
value={q.option2.marks}
/>
<label htmlFor={q.question}> {q.option2.title} </label>
</div>
<div className="card-body">
<input
type="radio"
id={"option3"}
name={q.question}
value={q.option3.marks}
/>
<label htmlFor={q.question}> {q.option3.title} </label>
</div>
<div className="card-body">
<input
type="radio"
id={"option4"}
name={q.question}
value={q.option4.marks}
/>
<label htmlFor={q.question}> {q.option4.title} </label>
</div>
</div>
);
})}
<div className="card">
<div className="card-header">Upload your CV.</div>
<div className="card-body">
<input name="cv" type="file" onChange={onFileChange} />
</div>
</div>
<div className="card">
<div className="card-header">Add your Linkedin.</div>
<div className="card-body">
<input
type="text"
name="op"
className="form-control"
id="op"
placeholder="https://www.linkedin.com/in/bhoomika-valani-695b22199/"
/>
</div>
</div>
<input
onClick={submitHandler}
type="submit"
value="Submit"
className="btn btn-primary btn-lg btn-block"
/>
</form>
</div>
);
}
export default AptitudeTest;
The request being sent is an XMLHTTPRequest which I cannot figure out how to parse it. The django code:
class ResponseAction(APIView):
parser_classes = [FormParser, MultiPartParser]
#csrf_exempt
def get(self, request, *args, **kwargs):
resp_objs = Response1.objects.filter(**request.data)
list0 = []
for resp_obj in resp_objs:
dict1 = model_to_dict(resp_obj)
candname = Candidate.objects.get(cand_email = resp_obj.cid)
dict1['cand_name'] = candname
list0.append(dict1)
return JsonResponse(list0,safe=False)
#csrf_exempt
def post(self, request, *args, **kwargs):
serializer1 = ResponseSerializer(data = request.data)
if serializer1.is_valid():
resp_obj = Response1.objects.filter(cid=request.data['cid'],testid=request.data['testid'])
if not resp_obj.exists():
serializer1.save()
print("stored")
else:
print(serializer1.errors)
return Response(serializer1.data)
When I tried printing the request.data the output is such
<QueryDict: {'------WebKitFormBoundarywCHXwKecZPVgYxxN\r\nContent-Disposition: form-data; name': ['"Content-Type"\r\n\r\nmultipart/form-data\r\n------WebKitFormBoundarywCHXwKecZPVgYxxN\r\nContent-Disposition: form-data; name="cid"\r\n\r\nb#gmail.com\r\n------WebKitFormBoundarywCHXwKecZPVgYxxN\r\nContent-Disposition: form-data; name="testid"\r\n\r\n1\r\n------WebKitFormBoundarywCHXwKecZPVgYxxN\r\nContent-Disposition: form-data; name="linkedin"\r\n\r\nasasdads\r\n------WebKitFormBoundarywCHXwKecZPVgYxxN\r\nContent-Disposition: form-data; name="score"\r\n\r\n0\r\n------WebKitFormBoundarywCHXwKecZPVgYxxN\r\nContent-Disposition: form-data; name="cv"; filename="zs.docx"\r\nContent-Type: application/vnd.openxmlformats-officedocument.wordprocessingml.document\r\n\r\nPK\x03\x04\x14\x00\x06\x00\x08\x00\x00\x00!\x002\x91oWf\x01\x00\x00¥\x05\x00\x00\x13\x00\x08\x02[Content_Types].xml ¢\x04\x02(\xa0\x00\x02\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00.....
.. represents more xml data. Can anyone help me or suggest me an alternative method to sent files and text from react to DRF. Thanks in advance