How to fix upload file from angular 7 to django rest - django

Question

I'have rest api devlopped with djago and application front devlopped with agular7 and i try to upload image to my rest api when i try to send it with form data the form data is empty in the api.
for angular i try to send form data with file.
Angular:
getPredictionImage(file): Observable<any> {
const HttpUploadOptions = {
headers: new HttpHeaders({ 'Content-Type': 'multipart/form-data'})
}
const f = new FormData();
f.append('image', file, file.name);
console.log(f);
return this.http.post(this.urlapiimage, file, HttpUploadOptions);
}
Django:
def post(self, request, format=None):
print("heloooo")
print(request.data)
serializer = MammographySerializer(data=request.data)
print(serializer)
if serializer.is_valid():
result='hi'
serializer.save()
return Response(result,status=status.HTTP_201_CREATED)
return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
the request.data is empty

Answer 1

it worked for me may be this help u to find your solution
Angular :
upload(file): Observable<any> {
let csrftoken = getCookie('csrftoken');
let headers = new HttpHeaders({
'Access-Control-Allow-Origin': '*',
'X-CSRFToken': csrftoken,
});
const formdata = new FormData();
formdata.append("image", file); //i did not use 3rd argument file.name
let options = {
headers: headers, withCredentials :true }
return this.http.post(this.urlapiimage , formdata, options )
}
Django:
def post(self, request, format=None):
if 'file' not in request.data:
raise ParseError("Empty content ")
photo = request.data["file"]
serializer = MammographySerializer(photo = photo) // use this instead data =request.data
if serializer.is_valid():
result='hi'
serializer.save()
return Response(result,status=status.HTTP_201_CREATED)
return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
after trying this , than also u r getting error , read about DRF parser ( https://www.django-rest-framework.org/api-guide/parsers/)
"important point if u r using chrome and if r using http://127.0.0.1:8000/ for django server and localhost:4200/ for angular than because of CORS(different ports) chrome does not allow . use this 127.0.0.1:4200/ for angular server instead of localhost:4200/ and if u don't want to do this use firefox instead of chrome it allows CORS