Django Ajax Form Upload with Image - django

Question

I am using Django + Ajax, and i'm trying to send a POST request to upload a form with an image.
However, i still get an error KeyError: 'file'
HTML form (notice i've added enctype="multipart/form-data"):
<form id="addProduct" method="post" enctype="multipart/form-data">
<label class="form-label required-field" for="file">Image</label>
<input class='form-control' id='file' name="file" type="file" accept="image/*" required/>
</form>
Javascript using AJAX requests:
$("#addProduct").on("submit", function (e) {
e.preventDefault()
var data = new FormData(this);
$.ajax({
url: '/admin/product/add/',
data: data,
type: 'post',
success: function (response) {
var result = response.result
console.log(result)
if (result == false) {
alert("Add product failed")
}
else {
alert("Add product successfully")
}
},
cache: false,
contentType: false,
processData: false
})
}
Django View - views.py:
class ProductAddPage(View):
def post(self, request):
img = request.FILES['file']
try:
#further processing
except:
traceback.print_exc()
return JsonResponse({"result":False}, status=200, safe=False)
return JsonResponse({"result":True}, status=200, safe=False)
Traceback:
Internal Server Error: /admin/product/add/
Traceback (most recent call last):
File "D:\Codes\Django\env\lib\site-packages\django\utils\datastructures.py", line 84, in __getitem__
list_ = super().__getitem__(key)
KeyError: 'file'
During handling of the above exception, another exception occurred:
Traceback (most recent call last):
File "D:\Codes\Django\env\lib\site-packages\django\core\handlers\exception.py", line 55, in inner
response = get_response(request)
File "D:\Codes\Django\env\lib\site-packages\django\core\handlers\base.py", line 197, in _get_response
response = wrapped_callback(request, *callback_args, **callback_kwargs)
File "D:\Codes\Django\env\lib\site-packages\django\views\generic\base.py", line 103, in view
return self.dispatch(request, *args, **kwargs)
File "D:\Codes\Django\env\lib\site-packages\django\contrib\auth\mixins.py", line 73, in dispatch
return super().dispatch(request, *args, **kwargs)
File "D:\Codes\Django\env\lib\site-packages\django\views\generic\base.py", line 142, in dispatch
return handler(request, *args, **kwargs)
File "D:\Codes\Django\draft\admin\views.py", line 346, in post
img = request.FILES['file']
File "D:\Codes\Django\env\lib\site-packages\django\utils\datastructures.py", line 86, in __getitem__
raise MultiValueDictKeyError(key)
django.utils.datastructures.MultiValueDictKeyError: 'file'