This is a pretty long question and I really appreciate your time - hopefully most part of the pasted codes you can just skim through.
I have been working on a Django project which involved user uploading images (and cropping/rotating the image on the client side, before sending the final image to the server). The JavaScript Image Cropper I found and used is Croppie, with some basic customization. The whole process was working at that time (about 4 months ago, Nov. 2017), but then I set the project aside.
I've recently picked it back up, and with some new package updates, I've made some minor modifications to the Django code, but DID NOT touch the JavaScript/HTML part. I was surprised that when I tried to upload an image, the console threw a ConnectionAbortedError
and triggered some downstream errors, very much like encountered in this question.
The full error log is as follows:
Traceback (most recent call last):
File "c:\users\xurub\appdata\local\programs\python\python36-32\Lib\wsgiref\handlers.py", line 138, in run
self.finish_response()
File "c:\users\xurub\appdata\local\programs\python\python36-32\Lib\wsgiref\handlers.py", line 180, in finish_response
self.write(data)
File "c:\users\xurub\appdata\local\programs\python\python36-32\Lib\wsgiref\handlers.py", line 274, in write
self.send_headers()
File "c:\users\xurub\appdata\local\programs\python\python36-32\Lib\wsgiref\handlers.py", line 332, in send_headers
self.send_preamble()
File "c:\users\xurub\appdata\local\programs\python\python36-32\Lib\wsgiref\handlers.py", line 255, in send_preamble
('Date: %s\r\n' % format_date_time(time.time())).encode('iso-8859-1')
File "c:\users\xurub\appdata\local\programs\python\python36-32\Lib\wsgiref\handlers.py", line 453, in _write
result = self.stdout.write(data)
File "c:\users\xurub\appdata\local\programs\python\python36-32\Lib\socketserver.py", line 775, in write
self._sock.sendall(b)
ConnectionAbortedError: [WinError 10053] An established connection was aborted by the software in your host machine
[03/Mar/2018 18:10:41] "GET /post_prod/ HTTP/1.1" 500 59
----------------------------------------
Exception happened during processing of request from ('127.0.0.1', 49806)
Traceback (most recent call last):
File "c:\users\xurub\appdata\local\programs\python\python36-32\Lib\wsgiref\handlers.py", line 138, in run
self.finish_response()
File "c:\users\xurub\appdata\local\programs\python\python36-32\Lib\wsgiref\handlers.py", line 180, in finish_response
self.write(data)
File "c:\users\xurub\appdata\local\programs\python\python36-32\Lib\wsgiref\handlers.py", line 274, in write
self.send_headers()
File "c:\users\xurub\appdata\local\programs\python\python36-32\Lib\wsgiref\handlers.py", line 332, in send_headers
self.send_preamble()
File "c:\users\xurub\appdata\local\programs\python\python36-32\Lib\wsgiref\handlers.py", line 255, in send_preamble
('Date: %s\r\n' % format_date_time(time.time())).encode('iso-8859-1')
File "c:\users\xurub\appdata\local\programs\python\python36-32\Lib\wsgiref\handlers.py", line 453, in _write
result = self.stdout.write(data)
File "c:\users\xurub\appdata\local\programs\python\python36-32\Lib\socketserver.py", line 775, in write
self._sock.sendall(b)
ConnectionAbortedError: [WinError 10053] An established connection was aborted by the software in your host machine
During handling of the above exception, another exception occurred:
Traceback (most recent call last):
File "c:\users\xurub\appdata\local\programs\python\python36-32\Lib\wsgiref\handlers.py", line 141, in run
self.handle_error()
File "W:\Dropbox\Dropbox\work\Project\b2m\python-getting-started\venv\lib\site-packages\django\core\servers\basehttp.py", line 88, in handle_error
super(ServerHandler, self).handle_error()
File "c:\users\xurub\appdata\local\programs\python\python36-32\Lib\wsgiref\handlers.py", line 368, in handle_error
self.finish_response()
File "c:\users\xurub\appdata\local\programs\python\python36-32\Lib\wsgiref\handlers.py", line 180, in finish_response
self.write(data)
File "c:\users\xurub\appdata\local\programs\python\python36-32\Lib\wsgiref\handlers.py", line 274, in write
self.send_headers()
File "c:\users\xurub\appdata\local\programs\python\python36-32\Lib\wsgiref\handlers.py", line 331, in send_headers
if not self.origin_server or self.client_is_modern():
File "c:\users\xurub\appdata\local\programs\python\python36-32\Lib\wsgiref\handlers.py", line 344, in client_is_modern
return self.environ['SERVER_PROTOCOL'].upper() != 'HTTP/0.9'
TypeError: 'NoneType' object is not subscriptable
During handling of the above exception, another exception occurred:
Traceback (most recent call last):
File "c:\users\xurub\appdata\local\programs\python\python36-32\Lib\socketserver.py", line 639, in process_request_thread
self.finish_request(request, client_address)
File "c:\users\xurub\appdata\local\programs\python\python36-32\Lib\socketserver.py", line 361, in finish_request
self.RequestHandlerClass(request, client_address, self)
File "c:\users\xurub\appdata\local\programs\python\python36-32\Lib\socketserver.py", line 696, in __init__
self.handle()
File "W:\Dropbox\Dropbox\work\Project\b2m\python-getting-started\venv\lib\site-packages\django\core\servers\basehttp.py", line 155, in handle
handler.run(self.server.get_app())
File "c:\users\xurub\appdata\local\programs\python\python36-32\Lib\wsgiref\handlers.py", line 144, in run
self.close()
File "c:\users\xurub\appdata\local\programs\python\python36-32\Lib\wsgiref\simple_server.py", line 35, in close
self.status.split(' ',1)[0], self.bytes_sent
AttributeError: 'NoneType' object has no attribute 'split'
The form is generated as a Django model form, where 'ProductPic1','ProductPic2'
are two ImageFields and causing the current issue.
class PostProduct(ModelForm):
image64_1 = forms.CharField(widget=forms.HiddenInput(),required=False)
image64_2 = forms.CharField(widget=forms.HiddenInput(),required=False)
class Meta:
model = Product
fields = ('title', 'TotalPrice','AvailabilityTimeStart', 'AvailabilityTimeEnd','FromCountry' ,'FromCity', 'ToCountry','ToCity',
'Description1','Description2','Description3','Description4','ProductPic1','ProductPic2','ProductLink','AdditionalComments', 'image64_1','image64_2',)
# 'x1', 'y1', 'width1','height1', 'x2', 'y2', 'width2','height2',)
widgets = {
'FromCountry': autocomplete.Select2(url='country-autocomplete'),
'ToCountry': autocomplete.Select2(url='country-autocomplete'),
'FromCity': autocomplete.Select2(url='city-autocomplete', forward=['FromCountry']),
'ToCity': autocomplete.Select2(url='city-autocomplete', forward=['ToCountry']),
'AvailabilityTimeStart': DateInput(),
'AvailabilityTimeEnd':DateInput(),
#'AvailabilityTimeStart': SelectDateWidget(empty_label=("Choose Year", "Choose Month", "Choose Day"),),
}
Where the template is:
<form method="post" enctype="multipart/form-data" id="post_form">
{% csrf_token %}
{{ form | crispy }}
<div>
<button type="submit" class="w3-button w3-dark-grey " name="post_prod">Submit!</button>
</div>
</form>
<!-- MODAL TO CROP THE IMAGE -->
<div class="modal fade" id="modalCrop">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Crop the photo</h4>
</div>
<div id="photoCanvas" class="modal-body">
<img src="" id="image" style="max-width: 100%;">
</div>
<div class="modal-footer">
<div class="btn-group pull-left" role="group">
<!-- <button type="button" class="btn btn-default js-zoom-in">
<span class="fa fa-plus"></span>
</button>
<button type="button" class="btn btn-default js-zoom-out">
<span class="fa fa-minus"></span>
</button>
-->
<button type="button" class="btn btn-default left-rotate">
<span class="fa fa-undo"></span>
</button>
<button type="button" class="btn btn-default right-rotate">
<span class="fa fa-repeat"></span>
</button>
</div>
<button type="button" class="btn btn-default" data-dismiss="modal">Nevermind</button>
<button type="button" class="btn btn-primary js-crop-and-upload">Crop and upload</button>
</div>
</div>
</div>
</div>
And the JavaScripts:
<link rel="stylesheet" href="{% static 'css/bootstrap.css' %}" />
<link rel="stylesheet" href="{% static 'css/landing.css' %}" />
<link rel="stylesheet" href="{% static 'css/rotate.css' %}" />
<link rel="stylesheet" href="{% static 'css/croppie.css' %}" />
<!-- <script src="{% static 'js/cropper.min.js' %}"></script> -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<!-- <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> -->
<!-- <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://cdn.rawgit.com/fengyuanchen/cropper/v2.0.1/dist/cropper.min.css" rel="stylesheet">
<script src="https://cdn.rawgit.com/fengyuanchen/cropper/v2.0.1/dist/cropper.min.js"></script> -->
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/croppie.js' %}"></script>
// croppie
var el = document.getElementById('image');
var picNum;
var piclink;
var vanilla;
$("#id_ProductPic1").change(function () {
if (this.files && this.files[0]) {
var reader = new FileReader();
vanilla = new Croppie(el, {
viewport: { width: 350, height: 350 },
boundary: { width: 500, height: 500 },
showZoomer: true,
enableOrientation: true
});
reader.onload = function (e) {
piclink = e.target.result;
$("#image").attr("src", piclink);
$("#modalCrop").modal("show");
picNum = 1;
}
reader.readAsDataURL(this.files[0]);
}
});
$("#id_ProductPic2").change(function () {
if (this.files && this.files[0]) {
var reader = new FileReader();
vanilla = new Croppie(el, {
viewport: { width: 350, height: 350 },
boundary: { width: 500, height: 500 },
showZoomer: true,
enableOrientation: true
});
reader.onload = function (e) {
piclink = e.target.result;
$("#image").attr("src",piclink);
$("#modalCrop").modal("show");
picNum = 2;
}
reader.readAsDataURL(this.files[0]);
}
});
$("#modalCrop").on("shown.bs.modal", function () {
vanilla.bind({
url: piclink,
});
}).on("hidden.bs.modal", function () {
vanilla.destroy();
});
var angle = 0;
$('.right-rotate').on('click', function() {
vanilla.rotate(90);
});
$('.left-rotate').on('click', function() {
vanilla.rotate(270);
});
// croppie
/* SCRIPT TO COLLECT THE DATA AND POST TO THE SERVER */
$(".js-crop-and-upload").click(function () {
if (picNum == 1){
vanilla.result('base64','jpeg').then(function(img) {
// do something with cropped blob
$("#id_image64_1").val(img);
})}
else if (picNum == 2){
vanilla.result('base64','jpeg').then(function(img) {
// do something with cropped blob
$("#id_image64_2").val(img);
})};
$("#modalCrop").modal("hide");
});
More Info on the error: 1. Even after the thrown error, as long as other parts of the form are correctly filled out, it can still be submitted and posted - just no image attached to the post. 2. The error is thrown as I finish choosing the file/image to upload. Click the Choose File button - choose an image - click Open - ERROR THROWN - Image opens up, you can perform the crop and rotate - click Crop and Upload - Modal closes and back to the form - proceed to submit the form - no image data passed to server.
I am quite confused as there is very little change I made from it working 4 months ago to now not working, especially I am pretty sure I haven't touched the JavaScript part at all.
Django version may have changed - I am now using Django 1.11.7, but I don't recall what I was using before. Additionally, although I'm not too familiar with JavaScripts, it doesn't seem like there is anything related to connection there - isn't everything done on the client side?
Please let me know if you need any more info to help pinpoint the problem.
Thanks in advance!