Use ajax instead of posting to iframe and the likes

js/app.js

@@ -610,9 +610,9 @@ OC.Contacts = OC.Contacts || {
 			});
 		});
 
-		$(document).bind('request.select.contactphoto.fromlocal', function(e, metadata) {
+		$(document).bind('request.select.contactphoto.fromlocal', function(e, contact) {
-			console.log('request.select.contactphoto.fromlocal', metadata);
+			console.log('request.select.contactphoto.fromlocal', contact);
-			$('#contactphoto_fileupload').trigger('click', metadata);
+			$('#contactphoto_fileupload').trigger('click', contact);
 		});
 
 		$(document).bind('request.select.contactphoto.fromcloud', function(e, metadata) {
@@ -764,10 +764,12 @@ OC.Contacts = OC.Contacts || {
 				//console.log('scroll, unseen:', offset, self.$rightContent.height());
 			}
 		});*/
-		$('#contactphoto_fileupload').on('click', function(event, metadata) {
+		$('#contactphoto_fileupload').on('click', function(event, contact) {
+			console.log('contact', contact);
+			var metaData = contact.metaData();
 			var url = OC.generateUrl(
 				'apps/contacts/addressbook/{backend}/{addressBookId}/contact/{contactId}/photo',
-				{backend: metadata.backend, addressBookId: metadata.addressBookId, contactId: metadata.contactId}
+				{backend: metaData.backend, addressBookId: metaData.addressBookId, contactId: metaData.contactId}
 			);
 			$(this).fileupload('option', 'url', url);
 		}).fileupload({
@@ -775,6 +777,33 @@ OC.Contacts = OC.Contacts || {
 			multipart: false,
 			dataType: 'json',
 			type: 'PUT',
+			dropZone: null, pasteZone: null,
+			acceptFileTypes: /^image\//,
+			add: function(e, data) {
+				var file = data.files[0];
+				/*if (file.type.substr(0, 6) !== 'image/') {
+					$(document).trigger('status.contacts.error', {
+						error: true,
+						message: t('contacts', 'Only images can be used as contact photo')
+					});
+					return;
+				}*/
+				if (file.size > parseInt($(this).siblings('[name="MAX_FILE_SIZE"]').val())) {
+					$(document).trigger('status.contacts.error', {
+						error: true,
+						message: t(
+							'contacts',
+							'The size of "{filename}" exceeds the maximum allowed {size}',
+							{filename: file.name, size: $(this).siblings('[name="max_human_file_size"]').val()}
+						)
+					});
+					return;
+				}
+				data.submit();
+			},
+			start: function(e, data) {
+				console.log('fileupload.start',data);
+			},
 			done: function (e, data) {
 				console.log('Upload done:', data);
 				self.editPhoto(
@@ -784,10 +813,15 @@ OC.Contacts = OC.Contacts || {
 			},
 			fail: function(e, data) {
 				console.log('fail', data);
-				OC.notify({message:data.errorThrown + ': ' + data.textStatus});
+				var response = self.storage.formatResponse(data.jqXHR.responseJSON, data.jqXHR);
+				$(document).trigger('status.contacts.error', response);
 			}
 		});
 
+		this.$rightContent.bind('drop dragover', function (e) {
+			e.preventDefault();
+		});
+
 		this.$ninjahelp.find('.close').on('click keydown',function(event) {
 			if(wrongKey(event)) {
 				return;
@@ -1542,18 +1576,7 @@ OC.Contacts = OC.Contacts || {
 			this.$cropBoxTmpl = $('#cropBoxTemplate');
 		}
 		var $container = $('<div />').appendTo($('body'));
-		var url = OC.generateUrl(
+		var $dlg = this.$cropBoxTmpl.octemplate().prependTo($container);
-			'apps/contacts/addressbook/{backend}/{addressBookId}/contact/{contactId}/photo/{key}/crop',
-			{backend: metadata.backend, addressBookId: metadata.addressBookId, contactId: metadata.contactId, key: tmpkey}
-		);
-		var $dlg = this.$cropBoxTmpl.octemplate(
-			{
-				action: url,
-				backend: metadata.backend,
-				addressbookid: metadata.addressbookid,
-				contactid: metadata.contactid,
-				tmpkey: tmpkey
-			}).prependTo($container);
 
 		$.when(this.storage.getTempContactPhoto(
 			metadata.backend,
@@ -1587,7 +1610,7 @@ OC.Contacts = OC.Contacts || {
 					{
 						text: t('contacts', 'Crop photo'),
 						click:function() {
-							self.savePhoto($(this), function() {
+							self.savePhoto($(this), metadata, tmpkey, function() {
 								$container.ocdialog('close');
 							});
 						},
@@ -1607,31 +1630,34 @@ OC.Contacts = OC.Contacts || {
 			console.warn('Error getting temporary photo');
 		});
 	},
-	savePhoto:function($dlg, cb) {
+	savePhoto:function($dlg, metaData, key, cb) {
-		var $form = $dlg.find('#cropform');
+		var coords = {};
-		var $target = $dlg.find('#crop_target');
+		$.each($dlg.find('#coords').serializeArray(), function(idx, coord) {
-		console.log('target', $target);
+			coords[coord.name] = coord.value;
-		$target.on('load', function() {
+		});
-			console.log('submitted');
+
-			var response = $.parseJSON($target.contents().text());
+		$.when(this.storage.cropContactPhoto(
-			console.log('response', response);
+			metaData.backend, metaData.addressBookId, metaData.contactId, key, coords
-			if(response && response.status === 'success') {
+		))
+		.then(function(response) {
 			$(document).trigger('status.contact.photoupdated', {
 				id: response.data.id,
 				thumbnail: response.data.thumbnail
 			});
-			} else {
+		})
-				if(!response) {
+		.fail(function(response) {
+			console.log('response', response);
+			if(!response || !response.message) {
 				$(document).trigger('status.contacts.error', {
 					message:t('contacts', 'Network or server error. Please inform administrator.')
 				});
 			} else {
 				$(document).trigger('status.contacts.error', response);
 			}
-			}
+		})
+		.always(function() {
 			cb();
 		});
-		$form.submit();
 	}
 };
 

js/contacts.js

@@ -1738,7 +1738,7 @@ OC.Contacts = OC.Contacts || {};
 				$(document).trigger('request.select.contactphoto.fromcloud', self.metaData());
 			});
 			$phototools.find('.upload').on('click', function() {
-				$(document).trigger('request.select.contactphoto.fromlocal', self.metaData());
+				$(document).trigger('request.select.contactphoto.fromlocal', self);
 			});
 			if(this.hasPhoto()) {
 				$phototools.find('.delete').show();

js/storage.js

@@ -23,6 +23,7 @@ OC.Contacts = OC.Contacts || {};
 			if(response.status === 'error'|| this.statusCode >= 400) {
 				this.error = true;
 				if(this.statusCode < 500) {
+					console.log('JSONResponse', response);
 					this.message = (response.data && response.data.message)
 						? response.data.message
 						: response;
@@ -30,7 +31,7 @@ OC.Contacts = OC.Contacts || {};
 					this.message = t('contacts', 'Server error! Please inform system administator');
 				}
 			} else {
-				this.data = response;
+				this.data = response.data || response;
 			}
 		}
 	};
@@ -54,6 +55,8 @@ OC.Contacts = OC.Contacts || {};
 	/**
 	 * When the response isn't returned from requestRoute(), you can
 	 * wrap it in a JSONResponse so that it's parsable by other objects.
+	 * FIXME: Reverse the order of the arguments as jqXHR should contain
+	 * everything needed.
 	 *
 	 * @param object response The body of the response
 	 * @param XMLHTTPRequest http://api.jquery.com/jQuery.ajax/#jqXHR
@@ -383,6 +386,24 @@ OC.Contacts = OC.Contacts || {};
 		return defer.promise();
 	};
 
+	/**
+	 * Crop a contact phot.
+	 *
+	 * @param string backend
+	 * @param string addressBookId Address book ID
+	 * @param string contactId Contact ID
+	 * @param string key The key to the cache where the temporary image is saved.
+	 * @param object coords An object with the properties: x, y, w, h
+	 */
+	Storage.prototype.cropContactPhoto = function(backend, addressBookId, contactId, key, coords) {
+		return this.requestRoute(
+			'addressbook/{backend}/{addressBookId}/contact/{contactId}/photo/{key}/crop',
+			'POST',
+			{backend: backend, addressBookId: addressBookId, contactId: contactId, key: key},
+			JSON.stringify(coords)
+		);
+	};
+
 	/**
 	 * Update a contact.
 	 *