I'm facing an issue with uploading files using the onchange event and AJAX. I am only able to get the file path on the backend, not the actual file itself. My goal is to modify the code so that when a PDF file is selected, it automatically gets uploaded and can be used in views.py.
a.html:
<html>
<head>
<title> Custom Django image and file upload using ajax </title>
</head>
<body>
<form enctype="multipart/form-data" id="id_ajax_upload_form" method="POST" novalidate="">
{%csrf_token%}
<input type="file" id="resumes" onchange="funct()" name="resumes">
<span>File</span>
<input type="file" id="file" name="file" size="10"/>
<input id="uploadbutton" type="button" value="Upload"/>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var csrftoken = getCookie('csrftoken');
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
$(document).ready(function(){
$("#file").change(function(){
var filename = $("#file").val();
$.ajax({
type: "POST",
url: "",
enctype: 'multipart/form-data',
data: {
file: filename,
},
success: function () {
// alert("Data Uploaded: ");
}
});
})
})
</script>
</body>
</html>
Views.py:
def custom_django_image_and_file_upload_ajax(request):
if request.method == 'POST':
print("working..............")
print(request.POST.get('file'))
print(request.FILES.get('file'))
print(request.FILES.getlist("file"))
print("...................................................")
print(request.POST.get('data'))
print(request.FILES.get('data'))
print(request.FILES.getlist("data"))
return JsonResponse({'error': False, 'message': 'file'})
return render(request, 'a.html')
Console output upon selecting a file:
System check identified no issues (0 silenced).
December 08, 2020 - 06:55:41
Django version 3.1.3, using settings 'mysite.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.
Not Found: /
[08/Dec/2020 06:55:46] "GET / HTTP/1.1" 404 2131
Not Found: /favicon.ico
[08/Dec/2020 06:55:46] "GET /favicon.ico HTTP/1.1" 404 2182
[08/Dec/2020 06:55:51] "GET /URL1/upload/ HTTP/1.1" 200 2318
working..............
C:\fakepath\dummy3.pdf
None
[]
...................................................
None
None
[]
[08/Dec/2020 06:56:09] "POST /URL1/upload/ HTTP/1.1" 200 35
How can I successfully retrieve the file on the backend?