From 72a8401f14a6c09a60f48bf938d2fa79d89c2cb5 Mon Sep 17 00:00:00 2001
From: Dario Milicic <dario.milicic@gmail.com>
Date: Tue, 7 Oct 2014 23:48:16 +0200
Subject: [PATCH] All files that are uploaded when creating a new entry now
 appear in the attachment section where they can be deleted from the server
 entirely. NOTE: This does NOT automatically remove them from the editor as
 well.

---
 scripts/ckeditor/plugins/dndfiles/plugin.js   | 73 +++++++++++++------
 .../plugins/fileupload/dialogs/fileupload.js  | 34 +++++++--
 .../ckeditor/plugins/image2/dialogs/image2.js | 54 +++++++++++---
 3 files changed, 123 insertions(+), 38 deletions(-)

diff --git a/scripts/ckeditor/plugins/dndfiles/plugin.js b/scripts/ckeditor/plugins/dndfiles/plugin.js
index c2a6335b..4cbd88d3 100755
--- a/scripts/ckeditor/plugins/dndfiles/plugin.js
+++ b/scripts/ckeditor/plugins/dndfiles/plugin.js
@@ -74,40 +74,24 @@ CKEDITOR.plugins.add( 'dndfiles', {
 					}
 				}
 
-				// This function is called when the upload of files succedes. Displays uploaded images
-				// into img tags and everything else as an <a href> tag
-				function uploadSuccess(data) {
-					// End the progress bar
-                	progressJs().end();
-
-				    var html = '';
-				    for(var idx = 0; idx < data.attachments.length; idx++) {
-				    	var att = data.attachments[idx];
-				    	var name = att.fullName;
-
-				    	// this is an image and it has a thumbnail
-				    	if(att.thumbName) {
-				    		html += '<img src = "' + name + '">';
-				    	} else {	// this is not an image
-				    		html += "<a href = " + name + '>' + name + '</a>';
-				    	}
-				    }
-
-				    editor.insertHtml(html);
-				}
-
 				// Upload dropped files using FormData
 				function upload(files) {
 				    // debugger;
 
 				    var formData = tests.formdata ? new FormData() : null;
+
+			        // add all the other attachments that were previously added
+			        $( "input[name^='attachment']" ).each(function(idx, el) {
+			            formData.append($(el).attr('name'), $(el).attr('value'));
+			        });
+
 				    formData.append('drop-count', files.length);		// number of files dropped that should be sent
 				    for (var i = 0; i < files.length; i++) {
 				    	if (tests.formdata) {
 				    		formData.append('next_attachment', parent.next_attachment);
 				    		formData.append('encoding', "HTML");
 				    		formData.append('attfile', files[i]);
-				    		formData.append('acmd', "Upload");			// Command for server to recognize this as an ajax upload
+				    		formData.append('cmd', "Upload");			// Command for server to recognize this as an file upload
 				    		parent.next_attachment += 1;
 				    	}
 				    }
@@ -140,7 +124,48 @@ CKEDITOR.plugins.add( 'dndfiles', {
 						  type: 'POST',
 						  url: URL,
 						  data: formData,
-						  success: uploadSuccess,
+
+						// This function is called when the upload of files succedes. Displays uploaded images
+						// into img tags and everything else as an <a href> tag
+						  success: function(data) {
+	  					    var html = '';
+
+		        			// Extract the last attachment section of the returned page
+					        var attch = $(".attachment", $(data)).slice(-files.length);
+
+					        // Create a new attachment section that will replace the current one
+					        var attch_upload = $("#attachment_upload", $(data));
+
+					        $("input", attch).each(function() {
+
+					        	// Extract the url of the file
+					        	var src = $(this)[0].defaultValue;
+
+					        	// Ignore inputs that have this value as it is not needed
+					        	if(src === "Delete")
+					        		return;
+
+						    	if(src.indexOf(".png") >= 0 || src.indexOf(".jpg") >= 0 || src.indexOf(".jpeg") >= 0) { // This is an image
+						    		html += '<img src = "' + src + '">';
+						    	} else {	// this is not an image
+						    		// Server appends 14 characters in front of the name so we should remove them
+						    		var server_suffix = 14;
+						    		html += "<a href = " + src + '>' + src.slice(server_suffix) + '</a>';
+						    	}
+					        });
+
+						    // Insert files into the editor
+						    editor.insertHtml(html);
+
+			                // add the new attachments to the current page
+			                $("#attachment_upload").before(attch.slice(-files.length));
+
+			                // replace the attachment upload section
+			                $("#attachment_upload").replaceWith(attch_upload);
+
+							// End the progress bar
+		                	progressJs().end();
+						  },
 						  fail: function() {
 						  	// End the progress bar
                 			progressJs().end();
diff --git a/scripts/ckeditor/plugins/fileupload/dialogs/fileupload.js b/scripts/ckeditor/plugins/fileupload/dialogs/fileupload.js
index 9f36e56f..7ff1782d 100644
--- a/scripts/ckeditor/plugins/fileupload/dialogs/fileupload.js
+++ b/scripts/ckeditor/plugins/fileupload/dialogs/fileupload.js
@@ -52,17 +52,26 @@ CKEDITOR.dialog.add( 'fileuploadDialog', function( editor ) {
             						return false;
             					}
 
+            					// Create the form data object for uploading with POST
             					var formData = new FormData();
+
+						        // add all the other attachments that were previously added
+						        $( "input[name^='attachment']" ).each(function(idx, el) {
+						            formData.append($(el).attr('name'), $(el).attr('value'));
+						        });
+
+
             					formData.append('drop-count', files.length);		// number of files being uploaded
-            					formData.append('acmd', "Upload");			// Command for the server to recognize this as an ajax upload
 							    for (var i = 0; i < files.length; i++) {
 						    		formData.append('next_attachment', parent.next_attachment);
 						    		formData.append('encoding', "HTML");
 						    		formData.append('attfile', files[i]);
+						    		parent.next_attachment += 1;
 
 						    		// Remember the original name of the file in a hidden text field
 						    		dialog.getContentElement( 'Upload', 'name' ).setValue( files[i].name );
 				    			}
+				    			formData.append('cmd', "Upload");          // Command for server to recognize this as an file upload
 
 				    			var URL = '/' + parent.logbook + '/upload.html?next_attachment=' + parent.next_attachment;
 
@@ -93,14 +102,29 @@ CKEDITOR.dialog.add( 'fileuploadDialog', function( editor ) {
 								  data: formData,
 								  success: function(data) {
 
-					                // End the progress bar
-					                progressJs().end();
+		                			// Extract the last attachment section of the returned page
+							        var attch = $(".attachment", $(data)).last();
 
-								  	if(data.attachments[0]) {	// check if we have the correct response
-								  		dialog.getContentElement( 'Upload', 'src' ).setValue( data.attachments[0].fullName );
+							        // Create a new attachment section that will replace the current one
+							        var attch_upload = $("#attachment_upload", $(data));
+
+							        // Extract the url
+							        var src = $("input", attch)[0].value;
+
+								  	if(src) {	// check if we have the correct response
+								  		dialog.getContentElement( 'Upload', 'src' ).setValue( src );
 								  	} else {
 								  		console.log("Data returned is not json...");
 								  	}
+
+					                // add the new attachments to the current page
+					                $("#attachment_upload").before(attch.slice(-files.length));
+
+					                // replace the attachment upload section
+					                $("#attachment_upload").replaceWith(attch_upload);
+
+					                // End the progress bar
+					                progressJs().end();
 								  },
 								  fail: function() {
 					                // End the progress bar
diff --git a/scripts/ckeditor/plugins/image2/dialogs/image2.js b/scripts/ckeditor/plugins/image2/dialogs/image2.js
index cb832aae..eae8ee97 100755
--- a/scripts/ckeditor/plugins/image2/dialogs/image2.js
+++ b/scripts/ckeditor/plugins/image2/dialogs/image2.js
@@ -546,7 +546,7 @@ CKEDITOR.dialog.add( 'image2', function( editor ) {
 				            	var dialog = this.getDialog();
             					var files = dialog.getContentElement("Upload", "upload").getInputElement().$.files;
 
-            					var file_missing_msg = localize("Please select a fileadaw!");
+            					var file_missing_msg = localize("Please select a file!");
 
             					// no files were selected
             					if(files.length == 0) {
@@ -554,14 +554,23 @@ CKEDITOR.dialog.add( 'image2', function( editor ) {
             						return false;
             					}
 
+            					// Create the form data object for uploading with POST
             					var formData = new FormData();
+
+						        // add all the other attachments that were previously added
+						        $( "input[name^='attachment']" ).each(function(idx, el) {
+						            formData.append($(el).attr('name'), $(el).attr('value'));
+						        });
+
             					formData.append('drop-count', files.length);		// number of files being uploaded
 							    for (var i = 0; i < files.length; i++) {
 						    		formData.append('next_attachment', parent.next_attachment);
 						    		formData.append('encoding', "HTML");
 						    		formData.append('attfile', files[i]);
-						    		formData.append('acmd', "Upload");			// Command for the server to recognize this as an ajax upload
+
+						    		parent.next_attachment += 1;
 				    			}
+				    			formData.append('cmd', "Upload");          // Command for server to recognize this as an file upload
 
 				    			var URL = '/' + parent.logbook + '/upload.html?next_attachment=' + parent.next_attachment;
 
@@ -591,19 +600,46 @@ CKEDITOR.dialog.add( 'image2', function( editor ) {
 								  data: formData,
 								  success: function(data) {
 
+		                			// Extract the last attachment section of the returned page
+							        var attch = $(".attachment", $(data)).last();
+
+							        // Create a new attachment section that will replace the current one
+							        var attch_upload = $("#attachment_upload", $(data));
+
+							      	// The last img tag in this html snippet contains the source of the image which we need
+							      	// We first split the html based on img tags
+							        var arr = attch.html().split("<img");
+
+							        // Then extract the source from the last array element
+							        var tmp_str = arr[arr.length - 1];
+
+							        // These are the start and end locations of the source
+							        var start = tmp_str.indexOf("src=");
+							        var end = tmp_str.indexOf("?thumb");
+
+							        // Finally extract the img source
+							        var suffix = 'src="'.length;
+							        var src = tmp_str.substr(start + suffix, end - start - suffix);
+
+								  	if(src) {	// check if we have the correct response
+            							dialog.getContentElement( 'info', 'src' ).setValue( src );
+            						} else {
+            							console.log("Couldn't find img source...");
+            						}
+
+					                // add the new attachments to the current page
+					                $("#attachment_upload").before(attch.slice(-files.length));
+
+					                // replace the attachment upload section
+					                $("#attachment_upload").replaceWith(attch_upload);
+
 								  	// End the progress bar
 		                			progressJs().end();
-
-								  	if(data.attachments) {	// check if we have the correct response
-            							dialog.getContentElement( 'info', 'src' ).setValue( data.attachments[0].fullName );
-            						} else {
-            							console.log("Data returned is not json...");
-            						}
 								  },
 								  fail: function() {
 								  	// End the progress bar
 		                			progressJs().end();
-								  	console.log("error");
+								  	console.log("Error uploading image...");
 								  }
 								});