Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

open image file in binary mode in order to copy properly #12

Merged
merged 3 commits into from

2 participants

@taivo

the cropped file is copied from cicu_cropped folder to ajax_uploads folder. This copy gets corrupted because the source file is opened with r mode. I changed it to rb for binary treatment of image files.

@asaglimbeni asaglimbeni merged commit ab04b57 into from
@asaglimbeni
Owner

Hi Tavo
Thank you for your contribution
Alfredo

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
Showing with 47 additions and 39 deletions.
  1. +3 −0  .gitingore
  2. +42 −37 cicu/static/cicu/js/cicu-widget.js
  3. +2 −2 cicu/views.py
View
3  .gitingore
@@ -1,2 +1,5 @@
.idea
*.pyc
+
+/*.project
+/*.pydevproject
View
79 cicu/static/cicu/js/cicu-widget.js
@@ -33,28 +33,31 @@ SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
var console = global.console || {log: function() {}};
var CicuWidget = global.CicuWidget = function(element, options) {
- this.options = {
- modalButtonLabel : 'Upload image',
- changeButtonText : 'Change Image',
- sizeAlertMessage : 'Warning: the area selected is little, min size:',
- sizeErrorMessage : "Image doesn't meet the minimal size requirement",
- modalSaveCropMessage: 'Set image',
- modalCloseCropMessage: 'Close',
- uploadingMessage : 'Uploading your image',
- fileUploadLabel : 'Select image from your computer',
- sizeWarning : 'True',
- ratioWidth :'800',
- ratioHeight :'600',
- onUpload: null,
- onComplete: null,
- onError: null,
- onRemove: null,
- onCrop: null
- };
- $.extend(this.options, options);
- this.$element = $(element);
- $('label[for='+this.$element.attr('id')+']:first').removeAttr('for');
- this.initialize();
+ if(! $(element).hasClass('has-cicu-widget')){
+ this.options = {
+ modalButtonLabel : 'Upload image',
+ changeButtonText : 'Select a different image',
+ sizeAlertMessage : 'Warning: the area selected is too small, min size:',
+ sizeErrorMessage : "Image doesn't meet the minimal size requirement",
+ modalSaveCropMessage: 'Set image',
+ modalCloseCropMessage: 'Close',
+ uploadingMessage : 'Uploading your image',
+ fileUploadLabel : 'Select image from your computer',
+ sizeWarning : 'True',
+ ratioWidth :'800',
+ ratioHeight :'600',
+ onUpload: null,
+ onComplete: null,
+ onError: null,
+ onRemove: null,
+ onCrop: null
+ };
+ $.extend(this.options, options);
+ this.$element = $(element);
+ $('label[for='+this.$element.attr('id')+']:first').removeAttr('for');
+ this.initialize();
+ $(element).addClass('has-cicu-widget');
+ }
};
CicuWidget.prototype.DjangoCicuError = function(message) {
@@ -72,24 +75,25 @@ SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
CicuWidget.prototype.initialize = function() {
var self = this;
this.name = this.$element.attr('name');
- this.$modalButton = $('<a href="#uploadModal" role="button" class="btn upload-btn" data-toggle="modal">'+this.options['modalButtonLabel']+'</a>');
+ this.modalId = this.name + '-uploadModal';
+ this.$modalButton = $('<a href="#' + this.modalId +'" role="button" class="btn upload-btn" data-toggle="modal">'+this.options['modalButtonLabel']+'</a>');
this.$croppedImagePreview = $('<div class="cropped-imag-preview"><img src="'+this.$element.data('filename')+'"/></div>');
this.$croppedImagePreview.append(this.$modalButton);
this.$element.after(this.$croppedImagePreview);
- this.$modalWindow = $('<div id="uploadModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">' +
- '<div id="uploadModalBody" class="modal-body image-body-modal">' +
+ this.$modalWindow = $('<div id="' + this.modalId + '" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">' +
+ '<div class="modal-body image-body-modal">' +
'' +
'</div>' +
'<div class="modal-footer">' +
'<button class="btn" data-dismiss="modal" aria-hidden="true">'+this.options.modalCloseCropMessage+'</button>' +
- '<button id="modal-set-image-button" class="btn btn-primary disabled">'+this.options.modalSaveCropMessage+'</button>' +
+ '<button class="modal-set-image-button btn btn-primary disabled">'+this.options.modalSaveCropMessage+'</button>' +
'</div>' +
'</div>');
this.$element.after(this.$modalWindow);
- this.$uploadModalBody = $('#uploadModalBody');
- this.$warningSize = $('<div id="warning-size-message" class="alert alert-error hide"></div>');
+ this.$uploadModalBody = this.$modalWindow.children('div.modal-body');
+ this.$warningSize = $('<div class="warning-size-message alert alert-error hide"></div>');
this.$uploadModalBody.before(this.$warningSize);
// Create a hidden field to contain our uploaded file name
@@ -108,12 +112,12 @@ SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
self.upload();
});
this.$uploadButton = $('<div class="fileupload fileupload-new" data-provides="fileupload"><span class="btn btn-file">' +
- '<span id="file-upload-label" class="fileupload-new" data-loading-text="Uploading your image...">'+this.options.fileUploadLabel+'</span></span>'+
+ '<span class="fileupload-label fileupload-new" data-loading-text="Uploading your image...">'+this.options.fileUploadLabel+'</span></span>'+
'</div>');
this.$uploadModalBody.append(this.$uploadButton);
- this.$fileUploadLabel = $('#file-upload-label');
- $( '.btn-file' ).append(this.$element);
- this.$modalSetImageButton = $('#modal-set-image-button');
+ this.$fileUploadLabel = this.$uploadButton.find('.fileupload-label');
+ this.$uploadButton.children('.btn-file').append(this.$element);
+ this.$modalSetImageButton = this.$modalWindow.find('button.modal-set-image-button');
this.$modalSetImageButton.on( 'click' , function(){
if (!$(this).hasClass('disabled')){
self.setCrop();
@@ -247,7 +251,7 @@ SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
this.$previewArea.empty();
this.$previewArea.append(this.generateFilePreview(filename));
image_cropping.init(this);
- this.$cropping = $('#id_cropping' );
+ this.$cropping = this.$previewArea.find('input[name=cropping]');
this.$uploadModalBody.removeClass( 'image-body-modal' );
this.$previewArea.show();
@@ -264,7 +268,7 @@ SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
var $self = this;
$.each(['jpg', 'jpeg', 'png', 'gif'], function(i, ext) {
if(filename.toLowerCase().slice(-ext.length) == ext) {
- var crop_input = '<input data-size-warning="'+$self.options.sizeWarning+'" data-width="'+$self.options.ratioWidth+'" data-height="'+$self.options.ratioHeight+'" data-allow-fullsize="false" name="cropping" maxlength="255" value="300,100,600,600" class="image-ratio" data-image-field="image_field" id="id_cropping" data-adapt-rotation="false" type="text" data-my-name="cropping" style="display: none;" />';
+ var crop_input = '<input data-size-warning="'+$self.options.sizeWarning+'" data-width="'+$self.options.ratioWidth+'" data-height="'+$self.options.ratioHeight+'" data-allow-fullsize="false" name="cropping" maxlength="255" value="300,100,600,600" class="image-ratio" data-image-field="image_field" data-adapt-rotation="false" type="text" data-my-name="cropping" style="display: none;" />';
output += '<input data-org-width="'+width+'" data-org-height="'+height+'" data-field-name="image_field" class="crop-thumb hide" src="'+filename+'" data-thumbnail-url="'+filename+'" />' + crop_input;
return false;
}
@@ -277,12 +281,13 @@ SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
var cicuOptions = $( '#cicu-options');
options = cicuOptions.data();
cicuOptions.remove();
- $('input[type="file"].ajax-upload').each(function(index, element) {
+ $('input[type="file"].ajax-upload:not(.has-cicu-widget)').each(function(index, element) {
new CicuWidget(element, options);
});
};
}).call(this);
+
/******************/
/**IMAGE CROPPING**/
/******************/
@@ -316,7 +321,7 @@ var image_cropping = {
$image_input.hide().parents('div.form-row:first').hide();
}
- var image_id = $this.attr('id') + '-image',
+ var image_id = ajaxUploadWidget.name + '-' + $this.attr('name') + '-image',
org_width = $image_input.data('org-width'),
org_height = $image_input.data('org-height'),
min_width = $this.data('width'),
@@ -456,7 +461,7 @@ var image_cropping = {
this.$ajaxUploadWidget.$modalSetImageButton.addClass('disabled');
} else {
$jcrop_holder.removeClass('size-warning');
- $('#warning-size-message').hide();
+ this.$ajaxUploadWidget.$warningSize.hide();
this.$ajaxUploadWidget.$modalSetImageButton.removeClass('disabled');
}
}
View
4 cicu/views.py
@@ -58,7 +58,7 @@ def crop(request):
croppedImage.save(pathToFile)
new_file = UploadedFile()
- f = open(pathToFile, mode='r')
+ f = open(pathToFile, mode='rb')
new_file.file.save(uploaded_file.file.name, File(f))
f.close()
@@ -69,5 +69,5 @@ def crop(request):
return HttpResponse(simplejson.dumps(data))
- except Exception, e:
+ except Exception:
return HttpResponseBadRequest(simplejson.dumps({'errors': 'illegal request'}))
Something went wrong with that request. Please try again.