NIHVIVO-161 First cut at Image Upload

webapp/config/web.xml

@@ -362,15 +362,11 @@
 
   <servlet>
     <servlet-name>ImageUploadController</servlet-name>
-    <servlet-class>edu.cornell.mannlib.vitro.webapp.controller.edit.ImageUploadController</servlet-class>
+    <servlet-class>edu.cornell.mannlib.vitro.webapp.controller.freemarker.ImageUploadController</servlet-class>
   </servlet>
   <servlet-mapping>
     <servlet-name>ImageUploadController</servlet-name>
-    <url-pattern>/uploadimages</url-pattern>
+    <url-pattern>/uploadImages</url-pattern>
-  </servlet-mapping>
-  <servlet-mapping>
-    <servlet-name>ImageUploadController</servlet-name>
-    <url-pattern>/uploadimages.jsp</url-pattern>
   </servlet-mapping>
 
   <servlet>
@@ -1087,11 +1083,6 @@
     <!--load-on-startup>2</load-on-startup-->
   </servlet>
 
-  <servlet>
-    <servlet-name>uploadImages</servlet-name>
-    <servlet-class>edu.cornell.mannlib.vitro.webapp.controller.edit.UploadImagesServlet</servlet-class>
-  </servlet>
-  
   <servlet>
     <servlet-name>serveFiles</servlet-name>
     <servlet-class>edu.cornell.mannlib.vitro.webapp.filestorage.serving.FileServingServlet</servlet-class>
@@ -1198,10 +1189,6 @@
     <servlet-name>coauthors</servlet-name>
     <url-pattern>/coauthors</url-pattern>
   </servlet-mapping>
-  <servlet-mapping>
-    <servlet-name>uploadImages</servlet-name>
-    <url-pattern>/uploadImages</url-pattern>
-  </servlet-mapping>
   <servlet-mapping>
     <servlet-name>generic_create</servlet-name>
     <url-pattern>/generic_create</url-pattern>

webapp/src/edu/cornell/mannlib/vitro/webapp/web/jsptags/PropertyEditLinks.java

@@ -685,8 +685,8 @@ public class PropertyEditLinks extends TagSupport{
 	private LinkStruct getImageLink(String subjectUri, String contextPath,
 			String action, String mouseOverText, String text) {
 		LinkStruct ls = new LinkStruct();
-		String url = makeRelativeHref(contextPath + "uploadimages.jsp",
+		String url = makeRelativeHref(contextPath + "uploadImages",
-				"entityUri", subjectUri);
+				"entityUri", subjectUri, "action", action);
 		ls.setHref(url);
 		ls.setType(action);
 		ls.setMouseoverText(mouseOverText);

webapp/web/templates/freemarker/body/imageUpload/bogus.ftl

@@ -0,0 +1,5 @@
+<#-- $This file is distributed under the terms of the license in /doc/license.txt$ -->
+
+<#-- We should have gone to the individual display page, but we're here. -->
+
+<h2>This is so totally bogus.</h2>

webapp/web/templates/freemarker/body/imageUpload/cropImage.ftl

@@ -0,0 +1,76 @@
+<#-- $This file is distributed under the terms of the license in /doc/license.txt$ -->
+
+<#-- Crop the replacement main image for an Individual, to produce a thumbnail. -->
+
+${scripts.add("/js/jquery-plugins/jcrop/jquery-1.4.2.pack.js")}
+${scripts.add("/js/jquery-plugins/jcrop/jquery.Jcrop.js")}
+
+${stylesheets.addFromTheme("/uploadImages.css")}
+${stylesheets.addFromTheme("/jquery.Jcrop.css")}
+
+<script language="Javascript">
+
+		(function($) {
+
+			$(window).load(function(){
+
+				var jcrop_api = $.Jcrop('#cropbox',{
+					onChange: showPreview,
+					onSelect: showPreview,
+					aspectRatio: 1
+				});
+
+				var bounds = jcrop_api.getBounds();
+				var boundx = bounds[0];
+				var boundy = bounds[1];
+
+				function showPreview(coords)
+				{
+					if (parseInt(coords.w) > 0)
+					{
+						var rx = 115 / coords.w;
+						var ry = 115 / coords.h;
+
+						$('#preview').css({
+							width: Math.round(rx * boundx) + 'px',
+							height: Math.round(ry * boundy) + 'px',
+							marginLeft: '-' + Math.round(rx * coords.x) + 'px',
+							marginTop: '-' + Math.round(ry * coords.y) + 'px'
+						});
+					}
+				};
+
+			});
+
+		}(jQuery));
+
+</script>
+
+<div id="photoCroppingContainer">
+       <h2>Photo Upload</h2>
+       <!-- This is the image we're attaching Jcrop to -->
+       <div id="photoCroppingPreview">
+              <h6>Current Photo </h6>
+              <p class="photoCroppingTitleBody">Your profile photo will look like the image below. </p>
+              <div style="width:115px;height:115px;overflow:hidden;border:1px solid green;"> <img src="${imageUrl}" id="preview" /> </div>
+              <div id="photoCroppingHowTo">
+                     <p class="photoCroppingNote">To make adjustments, you can drag around and resize the blue square to the right. When you are happy with your photo click the “Save Photo” button. </p>
+                     <form action="${formAction}"  method="post">
+                     
+                     <!-- Totally bogus -->
+                     <input type="hidden" name="x" value="75">
+                     <input type="hidden" name="y" value="50">
+                     <input type="hidden" name="h" value="150">
+                     <input type="hidden" name="w" value="150">
+                     
+                     <input type="submit" value="Save photo">
+                     or <a href="${cancelUrl}">Cancel</a>
+                     </form>
+              </div>
+       </div>
+       <div id="photoCropping">
+             
+                     <img style="border:1px solid green;" src="${imageUrl}" id="cropbox" />
+                   
+       </div>
+</div>

webapp/web/templates/freemarker/body/imageUpload/newImage.ftl

@@ -0,0 +1,23 @@
+<#-- $This file is distributed under the terms of the license in /doc/license.txt$ -->
+
+<#-- Upload a replacement main image for an Individual. -->
+
+${stylesheets.addFromTheme("/uploadImages.css")}
+
+<#if errorMessage??>
+    <h2>${errorMessage}</h2>
+</#if>
+
+<div id="photoUploadContainer">
+       <h2>Photo Upload</h2>
+       <div id="photoUploadDefaultImageContainer">
+              <h6>Current Photo</h6>
+              <img src="${thumbnailUrl}" width="115" height="115" /> </div>
+       <div id="photoUploadForm">
+              <form action="${formAction}" enctype="multipart/form-data" method="post">
+                     <label>Upload  photo <span> (JPEG, GIF or PNG. Max Size: 50 MB)</span></label>
+                     <input type="file" name="datafile" size="30">
+                     <input type="submit" value="Upload a photo"> or <a href="${cancelUrl}">Cancel</a>
+              </form>
+       </div>
+</div>

webapp/web/templates/freemarker/body/imageUpload/replaceImage.ftl

@@ -0,0 +1,24 @@
+<#-- $This file is distributed under the terms of the license in /doc/license.txt$ -->
+
+<#-- Upload a replacement main image for an Individual. -->
+
+${stylesheets.addFromTheme("/uploadImages.css")}
+
+<#if errorMessage??>
+    <h2>${errorMessage}</h2>
+</#if>
+
+<div id="photoUploadContainer">
+       <h2>Photo Upload</h2>
+       <div id="photoUploadDefaultImageContainer">
+              <h6>Current Photo</h6>
+              <img src="${thumbnailUrl}" width="115" height="115" /> <br />
+       <a href="${deleteUrl}">Delete photo</a></div>
+       <div id="photoUploadForm">
+              <form action="${formAction}" enctype="multipart/form-data" method="post">
+                     <label>Replace  Photo <span> (JPEG, GIF or PNG. Max Size: 50 MB)</span></label>
+                     <input type="file" name="datafile" size="30">
+                     <input type="submit" value="Upload a photo"> or <a href="${cancelUrl}">Cancel</a>
+              </form>
+       </div>
+</div>