Django Broken Pipe Error during Form Submission
I am developing an online crime reporting system using django.
I have a page which contains a form that helps register the incident.
the form is as :
{%extends 'BaseTemplate.html' %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
{%load static tailwind_tags%}
{%tailwind_css%}
</head>
<body>
{% block main_content %}
<form action="" method="post" id="register_form" class="max-w-4xl mx-auto bg-white shadow-[0_2px_13px_-6px_rgba(0,0,0,0.4)] sm:p-8 p-6 rounded-md transform duration-500" enctype="multipart/form-data">
{% csrf_token %}
<div class="grid sm:grid-cols-2 gap-6 transform duration-500">
<div>
<input type="hidden" name="register_crime_form" id="register_crime_form" value="register_crime_form">
<label class="text-gray-900 text-sm mb-2 block">What Type of crime did you witness/face?</label>
<select name="crime_type" type="text" required
class=" focus:bg-transparent w-full text-sm text-gray-800 px-4 py-2.5 rounded border focus:ring-0 focus:border-black outline-none transition-all"
placeholder="Enter name">
<option value="" disabled selected value>-- choose an option --</option>
<option value="ANTI_SOCIAL">Antisocial Behaviour</option>
<option value="BURGLARY">Burglary</option>
<option value="CRIMINAL_DAMAGE">Criminal Damage</option>
<option value="CYBER_CRIME">CyberCrime</option>
<option value="FRAUD">Fraud</option>
<option value="HATE_CRIME">Hate Crime</option>
<option value="ROBBERY">Robbery</option>
<option value="RURAL_CRIME">Rural Crime</option>
<option value="SPIKING">Spiking</option>
<option value="STACKING">Stacking</option>
</select>
</div>
<div>
<label class="text-gray-900 text-sm mb-2 block">Date of the Crime</label>
<input name="crime_date" type="date" required
class=" focus:bg-transparent w-full text-sm text-gray-800 px-4 py-2.5 rounded border focus:ring-0 focus:border-black outline-none transition-all" />
</div>
<div>
<label class="text-gray-900 text-sm mb-2 block">Time of the Crime</label>
<input name="crime_time" type="time" required
class=" focus:bg-transparent w-full text-sm text-gray-800 px-4 py-2.5 rounded border focus:ring-0 focus:border-black outline-none transition-all" />
</div>
<div class="sm:flex justify-between sm:gap-5">
<div class="sm:w-1/2 w-full">
<label class="text-gray-900 text-sm mb-2 block">Crime Location</label>
<input type="text" name="crime_location" required
class=" focus:bg-transparent w-full text-sm text-gray-800 px-4 py-2.5 rounded border focus:ring-0 focus:border-black outline-none transition-all/"
placeholder="Balkhu, Kathmandu">
</div>
<div class=" sm:w-1/2 w-full mt-5 sm:mt-0">
<label class="text-gray-900 text-sm mb-2 block">Google map link</label>
<input type="text" name="crime_location_link" required
class=" focus:bg-transparent w-full text-sm text-gray-800 px-4 py-2.5 rounded border focus:ring-0 focus:border-black outline-none transition-all"
placeholder="google.com/maps/place/Thapagaon,+Kathmandu+44600/@27.6937656,85.3306358,13z/data=!3m1!4b1!4m6!3m5!1s0x39eb1a3a3c4d79a3:0xbc31c43a32d1db97!8m2!3d27.6984077!4d85.3730428!16s%2Fg%2F1tct_vj5?entry=ttu&g_ep=EgoyMDI1MDIwNS4xIKXMDSoASAFQAw%3D%3D ">
</div>
</div>
<div>
<label class="text-gray-900 text-sm mb-2 block">Provide Evidence</label>
<input type="file" name="crime_evidence" accept="image/*,video/*" required
class=" w-full text-sm px-4 py-[0.45rem] rounded focus:ring-0 border focus:border-none outline-0 box-border h-10 selection:ring-0 transition-all">
</div>
<div>
<label class="text-gray-900 text-sm mb-2 block">Describe the crime</label>
<textarea name="crime_description" id="" required
class="focus:bg-transparent w-full text-sm text-gray-800 rounded border focus:ring-0 focus:border-black h-10 outline-none transition-all "
placeholder="Write everything you saw in detail"></textarea>
</div>
<div class="">
<label class="text-gray-900 text-sm mb-2 block">Upload your Citizenship</label>
<input type="file" name="citizenship" required
class=" w-full text-sm px-4 py-[0.45rem] rounded focus:ring-0 border focus:border-none outline-0 box-border h-10 selection:ring-0 transition-all"
accept="image/*">
</div>
<div class="">
<label class="text-gray-900 text-sm mb-2 block">Upload your recent photo</label>
<button type="button" id="open"
class="w-full md:w-3/4 sm:w-3/6 bg-cool-gray min-w-40 text-white font-medium text-sm text-center px-4 py-[0.45rem] rounded focus:ring-0 border outline-0 box-border h-10 selection:ring-0 transition-all hover:underline">Open
Camera</button>
</div>
<div class="">
<label class="text-gray-900 text-sm mb-2 block">Are you the victim?</label>
<input type="checkbox" name="yes_no"
class="rounded-lg text-sm text-gray-800 border focus:ring-0 focus:border-black outline-none transition-all/">
</div>
<div class="">
<label class="text-gray-900 text-sm mb-2 " id="picturelabel" style="display:none;">Your Picture:</label>
<canvas id="canvas" style="display:none;"></canvas>
<img name="recent_photo" src="" id="img" style="display:none;" requierd
class=" selection:bg-black w-28 h-28 text-sm text-gray-800 rounded-lg focus:ring-0 focus:border-black outline-none transition-all/" />
<input type="hidden" name="recent_photo_dataurl" id="recent_photo_dataurl">
</div>
</div>
<p id="invalid" class="text-dark-red w-full text-xs text-gray-800 mt-3 rounded focus:ring-0 focus:border-blue-600 outline-none transition-all"></p>
<div class="mt-8 transform duration-500">
<button type="submit" id="submit"
class="block py-2.5 mx-auto px-4 text-sm tracking-wider rounded text-white focus:ring-0 bg-dark-blue w-full md:max-w-sm hover:underline hover:shadow-cool-gray hover:shadow-lg hover:scale-[1.02] hover:duration-[0.15s]">
<p>Report</p>
</button>
</div>
</form>
</div>
<script>
const form = document.querySelector('form');
submitbtn = document.getElementById("submit");
form.addEventListener('submit', function (event) {
// Prevent form submission for validation
fetch("/citizen/registercase/", {
method: "POST",
//include csrf_token
headers: {
"X-CSRFToken": "{{ csrf_token }}",
},
body: new FormData(document.getElementById("register_form")),
})
.then(response => response.json()).then(data => {
if (data.status === "error") {
document.getElementById("invalid").innerText = data.message;
}
else if (data.status === "success") {
//wait for 1 second to redirect
//setTimeout(() => {
window.location.href='/home/';
//},2000);
}
else {
document.getElementById("invalid").innerText = "An unexpected error occurred. Please try again.";
}
});
});
</script>
{% endblock %}
</body>
</html>
the url 'citizen/registercase/' corresponds to the following function in views.py:
def register_case(request):
if request.method == 'POST':
crime_type= request.POST.get('crime_type')
crime_date= request.POST.get('crime_date')
crime_time= request.POST.get('crime_time')
crime_location= request.POST.get('crime_location')
crime_location_link= request.POST.get('crime_location_link')
crime_evidence= request.FILES['crime_evidence']
crime_description= request.POST.get('crime_description')
citizenship = request.FILES['citizenship']
yes_no= True if request.POST.get('yes_no') else False
# recent_photo = request.FILES.get('recent_photo')
image_data_url = request.POST.get('recent_photo_dataurl')
image_file=None
if image_data_url:
format, imgstr = image_data_url.split(';base64,')
ext = format.split('/')[-1]
image_file = ContentFile(base64.b64decode(imgstr), name=f"recent_photo.{ext}")
# Get the user id from the session
user_id = request.session.get('user_id')
user = Ct.objects.get(user_id=user_id)
# Create a new case instance
case = Case(
case_title=crime_type,
reporter=user,
is_reporter_the_victim=yes_no,
crime_date=crime_date,
crime_location=crime_location,
crime_description=crime_description,
crime_time=crime_time,
crime_link=crime_location_link
)
case.save()
# check evidence type and create evidence instance accordingly
file_type = is_image_or_video(crime_evidence.name)
if file_type == 'image':
evidence = Evidence(case = case,
evidence_type = file_type,
evidence_pic_file = crime_evidence,
)
evidence.save()
elif file_type == 'video':
evidence = Evidence(case = case,
evidence_type = file_type,
evidence_vid_file = crime_evidence,
)
evidence.save()
else:
pass
user_photo = Ct.objects.get(user_id=user_id)
user_photo.user_recent_photo = image_file
user_photo.user_citizenship = citizenship
user_photo.save()
messages.success(request, "Case registered successfully.")
return JsonResponse({"status": "success", "message": "Case registered successfully."})
return JsonResponse({"status": "error", "message": "Invalid request."})
when i fill out the form and submit it...everything works fine and the case is successfully registered in the database but when the function returns the Jsonresponse to the frontend it just reloads the Report Crime Page instead of redirecting to homepage and shows the following error in terminal :
[22/Apr/2025 16:21:50,722] - Broken pipe from ('127.0.0.1', 56211)