Upload action implemented in My Spaces webscript portlet. Update of webscript javascripts to use helpful constants.

git-svn-id: https://svn.alfresco.com/repos/alfresco-enterprise/alfresco/HEAD/root@5724 c4b6b30b-aa2e-2d43-bbcb-ca4b014f7261

config/alfresco/templates/webscripts/org/alfresco/portlets/myspaces_get_html.ftl

@@ -44,7 +44,7 @@
          <#if c?length != 0>
             <#assign bcpath=bcpath+c+"/">
             <a class="spaceBreadcrumbLink" href="${scripturl("?f=${filter}&p=${bcpath}")}"><img src="${url.context}/images/icons/space-icon-default-16.png" border="0" width="16" height="16" alt="" style="vertical-align:-25%;padding-right:2px">${c}</a>
-            <#if c_index<crumbs?size-1>&nbsp;&gt;&nbsp;</#if>
+            <#if c_index < (crumbs?size - 1)>&nbsp;&gt;&nbsp;</#if>
          </#if>
       </#list>
    </div>
@@ -54,7 +54,11 @@
    <div class="spaceActions">
       <div class="spaceAction spaceActionUpload" title="Upload a new document" onclick="MySpaces.upload(this);">
          Upload
-         <div class="spaceUploadPanel"><input type="file" value=""></div>
+      </div>
+      <div class="spaceUploadPanel">
+         <#-- TODO: Url encode the path value! -->
+         <input style="margin:4px" type="submit" value="OK" onclick='MySpaces.uploadOK(this, "${path?url?replace("'","_%_")}");'>
+         <input style="margin:4px" type="button" value="Cancel" onclick="MySpaces.uploadClose(this);">
       </div>
       <div class="spaceAction spaceActionCreateSpace" title="Create a new Space">Create Space</div>
    </div>
@@ -297,8 +301,12 @@ a.spaceBreadcrumbLink:link, a.spaceBreadcrumbLink:visited, a.spaceBreadcrumbLink
    border: 1px solid #CCD4DB;
    background-color: #EEF7FB;
    width: 24em;
-   height: 6em;
+   height: 4em;
+   padding: 8px;
+   margin: 8px;
    display: none;
+   left: 8px;
+   -moz-border-radius: 5px;
 }
 
 </STYLE>

source/java/org/alfresco/web/bean/ajax/FileUploadBean.java

@@ -0,0 +1,195 @@
+/*
+ * Copyright (C) 2005-2007 Alfresco Software Limited.
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; either version 2
+ * of the License, or (at your option) any later version.
+
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+
+ * As a special exception to the terms and conditions of version 2.0 of 
+ * the GPL, you may redistribute this Program in connection with Free/Libre 
+ * and Open Source Software ("FLOSS") applications as described in Alfresco's 
+ * FLOSS exception.  You should have recieved a copy of the text describing 
+ * the FLOSS exception, and it is also available here: 
+ * http://www.alfresco.com/legal/licensing
+ */
+package org.alfresco.web.bean.ajax;
+
+import java.io.File;
+import java.io.Serializable;
+import java.net.URLDecoder;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+import java.util.StringTokenizer;
+
+import javax.faces.context.ExternalContext;
+import javax.faces.context.FacesContext;
+import javax.faces.context.ResponseWriter;
+import javax.servlet.http.HttpServletRequest;
+
+import org.alfresco.model.ContentModel;
+import org.alfresco.repo.content.MimetypeMap;
+import org.alfresco.repo.content.filestore.FileContentReader;
+import org.alfresco.service.ServiceRegistry;
+import org.alfresco.service.cmr.model.FileInfo;
+import org.alfresco.service.cmr.repository.ContentReader;
+import org.alfresco.service.cmr.repository.ContentWriter;
+import org.alfresco.service.cmr.repository.NodeRef;
+import org.alfresco.service.namespace.QName;
+import org.alfresco.util.TempFileProvider;
+import org.alfresco.web.app.servlet.BaseServlet;
+import org.alfresco.web.app.servlet.ajax.InvokeCommand;
+import org.alfresco.web.bean.repository.Repository;
+import org.alfresco.web.forms.XMLUtil;
+import org.apache.commons.fileupload.FileItem;
+import org.apache.commons.fileupload.disk.DiskFileItemFactory;
+import org.apache.commons.fileupload.servlet.ServletFileUpload;
+import org.apache.commons.io.FilenameUtils;
+import org.w3c.dom.Document;
+import org.w3c.dom.Element;
+import org.w3c.dom.Node;
+
+/**
+ * @author Kevin Roast
+ */
+public class FileUploadBean
+{
+   @InvokeCommand.ResponseMimetype(value=MimetypeMap.MIMETYPE_HTML)
+   public void uploadFile() throws Exception
+   {
+      FacesContext fc = FacesContext.getCurrentInstance();
+      ExternalContext externalContext = fc.getExternalContext();
+      HttpServletRequest request = (HttpServletRequest)externalContext.getRequest();
+      
+      ServletFileUpload upload = new ServletFileUpload(new DiskFileItemFactory());
+      upload.setHeaderEncoding("UTF-8");
+      
+      List<FileItem> fileItems = upload.parseRequest(request);
+      FileUploadBean bean = new FileUploadBean();
+      String uploadId = null;
+      String currentPath = null;
+      String filename = null;
+      String returnPage = null;
+      File file = null;
+      
+      for (FileItem item : fileItems)
+      {
+         if (item.isFormField() && item.getFieldName().equals("upload-id"))
+         {
+            uploadId = item.getString();
+         }
+         if (item.isFormField() && item.getFieldName().equals("return-page"))
+         {
+            returnPage = item.getString();
+         }
+         else if (item.isFormField() && item.getFieldName().equals("currentPath"))
+         {
+            currentPath = URLDecoder.decode(item.getString(), "UTF-8");
+         }
+         else
+         {
+            filename = FilenameUtils.getName(item.getName());
+            file = TempFileProvider.createTempFile("alfresco", ".upload");
+            item.write(file);
+         }
+      }
+
+      try
+      {
+         if (file != null)
+         {
+            // convert cm:name based path to a NodeRef
+            StringTokenizer t = new StringTokenizer(currentPath, "/");
+            int tokenCount = t.countTokens();
+            String[] elements = new String[tokenCount];
+            for (int i=0; i<tokenCount; i++)
+            {
+               elements[i] = t.nextToken();
+            }
+            
+            NodeRef containerRef = BaseServlet.resolveWebDAVPath(fc, elements, false);
+            
+            if (containerRef != null)
+            {
+               // Try and extract metadata from the file
+               String mimetype = Repository.getMimeTypeForFileName(fc, filename);
+               ContentReader cr = new FileContentReader(file);
+               cr.setMimetype(mimetype);
+               
+               // create properties for content type
+               String author = null;
+               String title = null;
+               String description = null;
+               Map<QName, Serializable> contentProps = new HashMap<QName, Serializable>(5, 1.0f);
+               if (Repository.extractMetadata(fc, cr, contentProps))
+               {
+                  author = (String)(contentProps.get(ContentModel.PROP_AUTHOR));
+                  title = (String)(contentProps.get(ContentModel.PROP_TITLE));
+                  description = (String)(contentProps.get(ContentModel.PROP_DESCRIPTION));
+               }
+               
+               // default the title to the file name if not set
+               if (title == null)
+               {
+                  title = filename;
+               }
+               
+               ServiceRegistry services = Repository.getServiceRegistry(fc);
+               FileInfo fileInfo = services.getFileFolderService().create(
+                     containerRef, filename, ContentModel.TYPE_CONTENT);
+               NodeRef fileNodeRef = fileInfo.getNodeRef();
+               
+               // set the author aspect
+               if (author != null)
+               {
+                  Map<QName, Serializable> authorProps = new HashMap<QName, Serializable>(1, 1.0f);
+                  authorProps.put(ContentModel.PROP_AUTHOR, author);
+                  services.getNodeService().addAspect(fileNodeRef, ContentModel.ASPECT_AUTHOR, authorProps);
+               }
+               
+               // apply the titled aspect - title and description
+               Map<QName, Serializable> titledProps = new HashMap<QName, Serializable>(2, 1.0f);
+               titledProps.put(ContentModel.PROP_TITLE, title);
+               titledProps.put(ContentModel.PROP_DESCRIPTION, description);
+               services.getNodeService().addAspect(fileNodeRef, ContentModel.ASPECT_TITLED, titledProps);
+               
+               // get a writer for the content and put the file
+               ContentWriter writer = services.getContentService().getWriter(fileNodeRef, ContentModel.PROP_CONTENT, true);
+               writer.setMimetype(mimetype);
+               writer.setEncoding("UTF-8");
+               writer.putContent(file);
+            }
+         }
+      }
+      catch (Exception e)
+      {
+         returnPage = returnPage.replace("${UPLOAD_ERROR}", e.getMessage());
+      }
+
+      Document result = XMLUtil.newDocument();
+      Element htmlEl = result.createElement("html");
+      result.appendChild(htmlEl);
+      Element bodyEl = result.createElement("body");
+      htmlEl.appendChild(bodyEl);
+
+      Element scriptEl = result.createElement("script");
+      bodyEl.appendChild(scriptEl);
+      scriptEl.setAttribute("type", "text/javascript");
+      Node scriptText = result.createTextNode(returnPage);
+      scriptEl.appendChild(scriptText);
+
+      ResponseWriter out = fc.getResponseWriter();
+      XMLUtil.print(result, out);
+      out.close();
+   }
+}

source/web/WEB-INF/faces-config-beans.xml

@@ -3264,6 +3264,15 @@
       </managed-property>
    </managed-bean>
    
+   <managed-bean>
+      <description>
+         Bean that accepts File uploads for the repository
+      </description>
+      <managed-bean-name>FileUploadBean</managed-bean-name>
+      <managed-bean-class>org.alfresco.web.bean.ajax.FileUploadBean</managed-bean-class>
+      <managed-bean-scope>request</managed-bean-scope>
+   </managed-bean>
+   
    <managed-bean>
       <description>
          Bean that returns manages the tree data for the navigator component

source/web/scripts/ajax/common.js

@@ -422,3 +422,75 @@ if (!Array.prototype.peek)
       return this[this.length - 1];
    }
 }
+
+var _fileUploads = [];
+
+function handleUploadHelper(fileInputElement,
+                            uploadId,
+                            callback,
+                            contextPath,
+                            actionUrl,
+                            params)
+{
+   var id = fileInputElement.getAttribute("name");
+   var d = fileInputElement.ownerDocument;
+   var iframe = d.createElement("iframe");
+   iframe.style.display = "none";
+   iframe.name = id + "upload_frame";
+   iframe.id = iframe.name;
+   document.body.appendChild(iframe);
+   
+   // makes it possible to target the frame properly in IE.
+   window.frames[iframe.name].name = iframe.name;
+   
+   _fileUploads[uploadId] = { path: fileInputElement.value, callback: callback };
+   
+   var form = d.createElement("form");
+   d.body.appendChild(form);
+   form.id = id + "_upload_form";
+   form.name = form.id;
+   form.style.display = "none";
+   form.method = "post";
+   form.encoding = "multipart/form-data";
+   form.enctype = "multipart/form-data";
+   form.target = iframe.name;
+   actionUrl = actionUrl || "/uploadFileServlet";
+   form.action = contextPath + actionUrl;
+   form.appendChild(fileInputElement);
+   
+   var id = document.createElement("input");
+   id.type = "hidden";
+   form.appendChild(id);
+   id.name = "upload-id";
+   id.value = uploadId;
+   
+   if (params != undefined && params != null)
+   {
+      for (var i in params)
+      {
+         var p = document.createElement("input");
+         p.type = "hidden";
+         form.appendChild(p);
+         id.name = i;
+         id.value = params[i];
+      }
+   }
+   
+   var rp = document.createElement("input");
+   rp.type = "hidden";
+   form.appendChild(rp);
+   rp.name = "return-page";
+   rp.value = "javascript:window.parent.uploadCompleteHelper('" + uploadId + 
+              "',{error: '${UPLOAD_ERROR}'})";
+   
+   form.submit();
+}
+
+function uploadCompleteHelper(id, args)
+{
+   var upload = _fileUploads[id];
+   upload.callback(id, 
+                   upload.path, 
+                   upload.path.replace(/.*[\/\\]([^\/\\]+)/, "$1"),
+                   args.error != "${UPLOAD_ERROR}" ? args.error : null);
+}

source/web/scripts/ajax/doclist.js

@@ -1,4 +1,10 @@
 var MyDocs = {
+   IMG_SMALL: 16,
+   IMG_LARGE: 64,
+   ANIM_LENGTH: 300,
+   DETAIL_MARGIN: 56,
+   TITLE_FONT_SIZE: 18,
+   RESOURCE_PANEL_HEIGHT: 150,
 
    start: function()
    {
@@ -19,10 +25,10 @@ var MyDocs = {
       var imgs = $$('#docPanel .docIconImage');
       var imgs64 = $$('#docPanel .docIconImage64');
       var resources = $$('#docPanel .docResource');
-      var fxItem = new Fx.Elements(items, {wait: false, duration: 300, transition: Fx.Transitions.linear});
+      var fxItem = new Fx.Elements(items, {wait: false, duration: MyDocs.ANIM_LENGTH, transition: Fx.Transitions.linear});
-      var fxDetail = new Fx.Elements(details, {wait: false, duration: 300, transition: Fx.Transitions.linear});
+      var fxDetail = new Fx.Elements(details, {wait: false, duration: MyDocs.ANIM_LENGTH, transition: Fx.Transitions.linear});
-      var fxInfo = new Fx.Elements(infos, {wait: false, duration: 300, transition: Fx.Transitions.linear});
+      var fxInfo = new Fx.Elements(infos, {wait: false, duration: MyDocs.ANIM_LENGTH, transition: Fx.Transitions.linear});
-      var fxIcon = new Fx.Elements(icons, {wait: false, duration: 300, transition: Fx.Transitions.linear});
+      var fxIcon = new Fx.Elements(icons, {wait: false, duration: MyDocs.ANIM_LENGTH, transition: Fx.Transitions.linear});
       var fxResource = new Fx.Elements(resources,
       {
          wait: false,
@@ -55,13 +61,13 @@ var MyDocs = {
       var fxImage = new Fx.Elements(imgs,
       {
          wait: false,
-         duration: 300,
+         duration: MyDocs.ANIM_LENGTH,
          transition: Fx.Transitions.linear,
          onComplete: function()
          {
             this.elements.each(function(img, i)
             {
-               img.src = (img.getStyle('height').toInt() == 16) ? img.defSrc : img.bigSrc;
+               img.src = (img.getStyle('height').toInt() == MyDocs.IMG_SMALL) ? img.defSrc : img.bigSrc;
             });
          }
       });
@@ -104,20 +110,20 @@ var MyDocs = {
             doc.addClass('docItemSelected');
             // move the item title to the right
             animItem[i] = {
-               'margin-left': [item.getStyle('margin-left').toInt(), 56],
+               'margin-left': [item.getStyle('margin-left').toInt(), MyDocs.DETAIL_MARGIN],
-               'font-size': [item.getStyle('font-size').toInt(), 18]
+               'font-size': [item.getStyle('font-size').toInt(), MyDocs.TITLE_FONT_SIZE]
             };
             // fade in the info button
             animInfo[i] = {'opacity': [info.getStyle('opacity'), 1]};
             // slide and fade in the details panel
             animDetail[i] = {
-               'height': [detail.getStyle('height').toInt(), detail.defHeight + 64],
+               'height': [detail.getStyle('height').toInt(), detail.defHeight + MyDocs.IMG_LARGE],
                'opacity': [detail.getStyle('opacity'), 1]
             };
             // grow the doctype image
             animImage[i] = {
-               'height': [img.getStyle('height').toInt(), 64],
+               'height': [img.getStyle('height').toInt(), MyDocs.IMG_LARGE],
-               'width': [img.getStyle('width').toInt(), 64]
+               'width': [img.getStyle('width').toInt(), MyDocs.IMG_LARGE]
             };
             img.src = img.bigSrc;
 
@@ -157,11 +163,11 @@ var MyDocs = {
                   }
                   // does the image need shrinking?
                   var ih = otherImg.getStyle('height').toInt();
-                  if (ih != 16)
+                  if (ih != MyDocs.IMG_SMALL)
                   {
                      animImage[j] = {
-                        'height': [ih, 16],
+                        'height': [ih, MyDocs.IMG_SMALL],
-                        'width': [ih, 16]
+                        'width': [ih, MyDocs.IMG_SMALL]
                      };
                   }
                }
@@ -224,7 +230,7 @@ var MyDocs = {
                
                // slide and fade in the resources panel
                animResource[i] = {
-                  'height': [resourceHeight, resource.defHeight + 150],
+                  'height': [resourceHeight, resource.defHeight + MyDocs.RESOURCE_PANEL_HEIGHT],
                   'opacity': [resource.getStyle('opacity'), 1]};
    
                // close other open documents and toggle this one if it's already open
@@ -241,20 +247,20 @@ var MyDocs = {
                      // continue animations that may have been going on before the click
                      // move the item title to the right
                      animItem[j] = {
-                        'margin-left': [otherItem.getStyle('margin-left').toInt(), 56],
+                        'margin-left': [otherItem.getStyle('margin-left').toInt(), MyDocs.DETAIL_MARGIN],
-                        'font-size': [otherItem.getStyle('font-size').toInt(), 18]
+                        'font-size': [otherItem.getStyle('font-size').toInt(), MyDocs.TITLE_FONT_SIZE]
                      };
                      // fade in the info button
                      animInfo[j] = {'opacity': [otherInfo.getStyle('opacity'), 1]};
                      // slide and fade in the details panel
                      animDetail[j] = {
-                        'height': [otherDetail.getStyle('height').toInt(), otherDetail.defHeight + 64],
+                        'height': [otherDetail.getStyle('height').toInt(), otherDetail.defHeight + MyDocs.IMG_LARGE],
                         'opacity': [otherDetail.getStyle('opacity'), 1]
                      };
                      // grow the doctype image
                      animImage[j] = {
-                        'height': [otherImg.getStyle('height').toInt(), 64],
+                        'height': [otherImg.getStyle('height').toInt(), MyDocs.IMG_LARGE],
-                        'width': [otherImg.getStyle('width').toInt(), 64]
+                        'width': [otherImg.getStyle('width').toInt(), MyDocs.IMG_LARGE]
                      };
                   }
                   else
@@ -289,11 +295,11 @@ var MyDocs = {
                      }
                      // does the image need shrinking?
                      var ih = otherImg.getStyle('height').toInt();
-                     if (ih != 16)
+                     if (ih != MyDocs.IMG_SMALL)
                      {
                         animImage[j] = {
-                           'height': [ih, 16],
+                           'height': [ih, MyDocs.IMG_SMALL],
-                           'width': [ih, 16]
+                           'width': [ih, MyDocs.IMG_SMALL]
                         };
                      }
    
@@ -359,20 +365,20 @@ var MyDocs = {
                // continue animations that may have been going on before the click
                // move the item title to the right
                animItem[i] = {
-                  'margin-left': [item.getStyle('margin-left').toInt(), 56],
+                  'margin-left': [item.getStyle('margin-left').toInt(), MyDocs.DETAIL_MARGIN],
-                  'font-size': [item.getStyle('font-size').toInt(), 18]
+                  'font-size': [item.getStyle('font-size').toInt(), MyDocs.TITLE_FONT_SIZE]
                };
                // fade in the info button
                animInfo[i] = {'opacity': [info.getStyle('opacity'), 1]};
                // slide and fade in the details panel
                animDetail[i] = {
-                  'height': [detail.getStyle('height').toInt(), detail.defHeight + 64],
+                  'height': [detail.getStyle('height').toInt(), detail.defHeight + MyDocs.IMG_LARGE],
                   'opacity': [detail.getStyle('opacity'), 1]
                };
                // grow the doctype image
                animImage[i] = {
-                  'height': [img.getStyle('height').toInt(), 64],
+                  'height': [img.getStyle('height').toInt(), MyDocs.IMG_LARGE],
-                  'width': [img.getStyle('width').toInt(), 64]
+                  'width': [img.getStyle('width').toInt(), MyDocs.IMG_LARGE]
                };
             }
             else
@@ -388,8 +394,8 @@ var MyDocs = {
                };
                animInfo[i] = {'opacity': [infos[i].getStyle('opacity'), 0]};
                animImage[i] = {
-                  'height': [img.getStyle('height').toInt(), 16],
+                  'height': [img.getStyle('height').toInt(), MyDocs.IMG_SMALL],
-                  'width': [img.getStyle('width').toInt(), 16]
+                  'width': [img.getStyle('width').toInt(), MyDocs.IMG_SMALL]
                };
             }
          });

source/web/scripts/ajax/myforms.js

@@ -1,4 +1,5 @@
 var MyWebForms = {
+   ANIM_LENGTH: 300,
    
    start: function()
    {
@@ -13,7 +14,7 @@ var MyWebForms = {
    {
       var projects = $$('#formsPanel .webProjectRow');
       var frms = $$('#formsPanel .webProjectForms');
-      var fxForm = new Fx.Elements(frms, {wait: false, duration: 300, transition: Fx.Transitions.sineInOut});
+      var fxForm = new Fx.Elements(frms, {wait: false, duration: MyWebForms.ANIM_LENGTH, transition: Fx.Transitions.sineInOut});
 
       projects.each(function(project, i)
       {

source/web/scripts/ajax/myspaces.js

@@ -1,4 +1,10 @@
 var MySpaces = {
+   IMG_SMALL: 16,
+   IMG_LARGE: 64,
+   ANIM_LENGTH: 300,
+   DETAIL_MARGIN: 56,
+   TITLE_FONT_SIZE: 18,
+   fileInput: null,
    
    start: function()
    {
@@ -18,20 +24,20 @@ var MySpaces = {
       var icons = $$('#spacePanel .spaceIcon');
       var imgs = $$('#spacePanel .spaceIconImage');
       var imgs64 = $$('#spacePanel .spaceIconImage64');
-      var fxItem = new Fx.Elements(items, {wait: false, duration: 300, transition: Fx.Transitions.linear});
+      var fxItem = new Fx.Elements(items, {wait: false, duration: MySpaces.ANIM_LENGTH, transition: Fx.Transitions.linear});
-      var fxDetail = new Fx.Elements(details, {wait: false, duration: 300, transition: Fx.Transitions.linear});
+      var fxDetail = new Fx.Elements(details, {wait: false, duration: MySpaces.ANIM_LENGTH, transition: Fx.Transitions.linear});
-      var fxInfo = new Fx.Elements(infos, {wait: false, duration: 300, transition: Fx.Transitions.linear});
+      var fxInfo = new Fx.Elements(infos, {wait: false, duration: MySpaces.ANIM_LENGTH, transition: Fx.Transitions.linear});
-      var fxIcon = new Fx.Elements(icons, {wait: false, duration: 300, transition: Fx.Transitions.linear});
+      var fxIcon = new Fx.Elements(icons, {wait: false, duration: MySpaces.ANIM_LENGTH, transition: Fx.Transitions.linear});
       var fxImage = new Fx.Elements(imgs,
       {
          wait: false,
-         duration: 300,
+         duration: MySpaces.ANIM_LENGTH,
          transition: Fx.Transitions.linear,
          onComplete: function()
          {
             this.elements.each(function(img, i)
             {
-               img.src = (img.getStyle('height').toInt() == 16) ? img.defSrc : img.bigSrc;
+               img.src = (img.getStyle('height').toInt() == MySpaces.IMG_SMALL) ? img.defSrc : img.bigSrc;
             });
          }
       });
@@ -71,20 +77,20 @@ var MySpaces = {
             space.addClass('spaceItemSelected');
             // move the item title to the right
             animItem[i] = {
-               'margin-left': [item.getStyle('margin-left').toInt(), 56],
+               'margin-left': [item.getStyle('margin-left').toInt(), MySpaces.DETAIL_MARGIN],
-               'font-size': [item.getStyle('font-size').toInt(), 18]
+               'font-size': [item.getStyle('font-size').toInt(), MySpaces.TITLE_FONT_SIZE]
             };
             // fade in the info button
             animInfo[i] = {'opacity': [info.getStyle('opacity'), 1]};
             // slide and fade in the details panel
             animDetail[i] = {
-               'height': [detail.getStyle('height').toInt(), detail.defHeight + 64],
+               'height': [detail.getStyle('height').toInt(), detail.defHeight + MySpaces.IMG_LARGE],
                'opacity': [detail.getStyle('opacity'), 1]
             };
             // grow the spacetype image
             animImage[i] = {
-               'height': [img.getStyle('height').toInt(), 64],
+               'height': [img.getStyle('height').toInt(), MySpaces.IMG_LARGE],
-               'width': [img.getStyle('width').toInt(), 64]
+               'width': [img.getStyle('width').toInt(), MySpaces.IMG_LARGE]
             };
             img.src = img.bigSrc;
 
@@ -124,11 +130,11 @@ var MySpaces = {
                   }
                   // does the image need shrinking?
                   var ih = otherImg.getStyle('height').toInt();
-                  if (ih != 16)
+                  if (ih != MySpaces.IMG_SMALL)
                   {
                      animImage[j] = {
-                        'height': [ih, 16],
+                        'height': [ih, MySpaces.IMG_SMALL],
-                        'width': [ih, 16]
+                        'width': [ih, MySpaces.IMG_SMALL]
                      };
                   }
                }
@@ -160,20 +166,20 @@ var MySpaces = {
                // continue animations that may have been going on before the click
                // move the item title to the right
                animItem[i] = {
-                  'margin-left': [item.getStyle('margin-left').toInt(), 56],
+                  'margin-left': [item.getStyle('margin-left').toInt(), MySpaces.DETAIL_MARGIN],
-                  'font-size': [item.getStyle('font-size').toInt(), 18]
+                  'font-size': [item.getStyle('font-size').toInt(), MySpaces.TITLE_FONT_SIZE]
                };
                // fade in the info button
                animInfo[i] = {'opacity': [info.getStyle('opacity'), 1]};
                // slide and fade in the details panel
                animDetail[i] = {
-                  'height': [detail.getStyle('height').toInt(), detail.defHeight + 64],
+                  'height': [detail.getStyle('height').toInt(), detail.defHeight + MySpaces.IMG_LARGE],
                   'opacity': [detail.getStyle('opacity'), 1]
                };
                // grow the spacetype image
                animImage[i] = {
-                  'height': [img.getStyle('height').toInt(), 64],
+                  'height': [img.getStyle('height').toInt(), MySpaces.IMG_LARGE],
-                  'width': [img.getStyle('width').toInt(), 64]
+                  'width': [img.getStyle('width').toInt(), MySpaces.IMG_LARGE]
                };
             }
             else
@@ -189,8 +195,8 @@ var MySpaces = {
                };
                animInfo[i] = {'opacity': [infos[i].getStyle('opacity'), 0]};
                animImage[i] = {
-                  'height': [img.getStyle('height').toInt(), 16],
+                  'height': [img.getStyle('height').toInt(), MySpaces.IMG_SMALL],
-                  'width': [img.getStyle('width').toInt(), 16]
+                  'width': [img.getStyle('width').toInt(), MySpaces.IMG_SMALL]
                };
             }
          });
@@ -203,8 +209,60 @@ var MySpaces = {
    
    upload: function(actionEl)
    {
-      var panel = $E(".spaceUploadPanel", actionEl);
+      var panel = $E(".spaceUploadPanel", $(actionEl).getParent());
-      panel.setStyle("display", "block");
+      panel.setStyle("opacity", 0);
+      panel.setStyle("display", "inline");
+      
+      // Generate a file upload element
+      // To perform the actual upload, the element is moved to a hidden iframe
+      // from which the upload is performed - this is required as javascript cannot
+      // set the important properties on a file upload element for security reasons.
+      // <input size="35" style="width:100%" type="file" value="" id="_upload" name="_upload">
+      if (this.fileInput == null)
+      {
+         var fileInput = $(document.createElement("input"));
+         fileInput.type = "file";
+         fileInput.name = "_upload";
+         fileInput.size = "35";
+         fileInput.setStyle("width", "100%");
+         fileInput.injectTop(panel);
+         this.fileInput = fileInput;
+      }
+      
+      var anim = new Fx.Styles(panel, {duration: MySpaces.ANIM_LENGTH, transition: Fx.Transitions.linear});
+      anim.start({'opacity': 1});
+   },
+   
+   uploadOK: function(actionEl, path)
+   {
+      // call the upload help to perform the upload
+      handleUploadHelper(this.fileInput,
+                         "1",   // TODO: generate unique ID (parent space noderef?)
+                         MySpaces.uploadCompleteHandler,
+                         getContextPath(),
+                         "/ajax/invoke/FileUploadBean.uploadFile",
+                         {currentPath: path.replace("_%_", "'")});   // decode path
+      this.fileInput = null;
+      this.uploadClose(actionEl);
+   },
+   
+   uploadClose: function(actionEl)
+   {
+      var panel = $(actionEl).getParent();
+      panel.setStyle("display", "none");
+   },
+   
+   uploadCompleteHandler: function(id, path, fileName, error)
+   {
+      if (error == null)
+      {
+         // TODO: refresh!
+         alert("Uploaded: " + fileName);
+      }
+      else
+      {
+         alert("ERROR: " + error);
+      }
    }
 };
 

source/web/scripts/ajax/mytasks.js

@@ -1,4 +1,6 @@
 var MyTasks = {
+   ANIM_LENGTH: 300,
+   DETAIL_PANEL_HEIGHT: 132,
    
    start: function()
    {
@@ -15,8 +17,8 @@ var MyTasks = {
       var infos = $$('#taskPanel .taskInfo');
       var details = $$('#taskPanel .taskDetail');
       var resources = $$('#taskPanel .taskResources');
-      var fxInfo = new Fx.Elements(infos, {wait: false, duration: 300, transition: Fx.Transitions.sineInOut});
+      var fxInfo = new Fx.Elements(infos, {wait: false, duration: MyTasks.ANIM_LENGTH, transition: Fx.Transitions.sineInOut});
-      var fxDetail = new Fx.Elements(details, {wait: false, duration: 300, transition: Fx.Transitions.sineInOut,
+      var fxDetail = new Fx.Elements(details, {wait: false, duration: MyTasks.ANIM_LENGTH, transition: Fx.Transitions.sineInOut,
          onComplete: function()
          {
             // event handler to ensure 
@@ -157,7 +159,7 @@ var MyTasks = {
 
                // slide and fade in the details panel
                animDetail[i] = {
-                  'height': [detailHeight, detail.defHeight + 132],
+                  'height': [detailHeight, detail.defHeight + MyTasks.DETAIL_PANEL_HEIGHT],
                   'opacity': [detail.getStyle('opacity'), 1]};
 
                // close other open tasks and toggle this one if it's already open