0

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">&times;</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!

10
  • What server are you using to deliver the content to the client? (Apache, Nginx)
    – Kickass
    Commented Mar 4, 2018 at 0:02
  • @JuanTheron This happens on both my local development server, as well as on the Heroku hosted version - now that you ask, I'm actually not sure what I'm using on Heroku; just followed the instructions there [and after searching for a while still haven't found an answer]. However, this particular feature was working on my django development server 4 months ago...
    – Michael Xu
    Commented Mar 4, 2018 at 0:25
  • Yes this sounds to me like a limitation in the max_post_size variable in the server you are using. Each server has different defaults. Try to upload a smaller image to comfirm (less then 64k would be a good test)
    – Kickass
    Commented Mar 4, 2018 at 0:27
  • With updates the default config is sometimes changed, so an update might have lowered your initial limit
    – Kickass
    Commented Mar 4, 2018 at 0:27
  • Even go as far as to test on 8k
    – Kickass
    Commented Mar 4, 2018 at 0:28

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.