How to add a file upload picker on my Alfresco form

Question

How can I add a file/data upload picker on my form in Alfresco Share? I need to click on my button then the file picker should appear. Can anybody help?

Answer 1

Check out the Manage Users console code defined in users.js, which features the ability to upload a CSV file containing user details.

First you need to define a HTML button control and then add some client-side script to bind that to an upload control

Define the button in your component's HTML template

<span class="yui-button yui-push-button" id="${args.htmlid?html}-uploadusers-button">
   <span class="first-child"><button>${msg("button.uploaduser")}</button></span>
</span>

Then create the YUI button in your client-side code (e.g. in your onReady() function)

var uploadUsersButton = Alfresco.util.createYUIButton(this, "uploadusers-button", this.onUploadUsersClick);

Then define the button click handler as a new function of your component's prototype - following example is from function ConsoleUsers_onUploadUsersClick() in users.js which you will need to modify as per your needs

onUploadUsersClick: function onUploadUsersClick()
{
   // Force the use of the HTML (rather than Flash) uploader because there are issues with the
   // Flash uploader in these circumstances when Sharepoint is being used. The Flash uploader
   // picks up the wrong JSESSIONID cookie which causes the upload to fail.
   if (!this.fileUpload)
   {
      this.fileUpload = Alfresco.util.ComponentManager.findFirst("Alfresco.HtmlUpload") 
   }

   // Show uploader for single file select - override the upload URL to use appropriate upload service
   var uploadConfig =
   {
      uploadURL: "api/people/upload.html",
      mode: this.fileUpload.MODE_SINGLE_UPLOAD,
      onFileUploadComplete:
      {
         fn: this.onUsersUploadComplete,
         scope: this
      }
   };

   this.fileUpload.show(uploadConfig);

   // Make sure the "use Flash" tip is hidden just in case Flash is enabled...
   var singleUploadTip = Dom.get(this.fileUpload.id + "-singleUploadTip-span");
   Dom.addClass(singleUploadTip, "hidden");
   Event.preventDefault(e);
}

Note the use of the uploadURL parameter in the config object. You should set this to the URL of a custom repository web script you create that knows how to handle the contents of the uploaded file.

The user upload example also defines a method onUsersUploadComplete() that you will see referenced. It is up to you to implement your own component method here to take appropriate action such as updating the UI based on the results of the upload.

Answer 2

For creating the form, you should put three files in the path:

/Alfresco/Tomcat/shared/classes/alfresco/site-webscript/org/alfresco/components/dashlets

There, you should have:

yourCustomForm.get.desc.xml
yourCustomForm.get.html.ftl
yourCustomForm.get.js

in the XML, you should put something like that:

<webscript>
<shortname>My Form</shortname>
<description>Form to upload new doc</description>
<family>dashlet</family>
<url>/components/dashlets/yourCustomForm</url>
<authentication>user</authentication>
</webscript>

the FTL file:

<!-- Pre-requisite: flash-upload and html-upload components are also included on the page -->
<#assign fileUploadConfig = config.scoped["DocumentLibrary"]["file-upload"]!>
<#if fileUploadConfig.getChildValue??>
<#assign adobeFlashEnabled = fileUploadConfig.getChildValue("adobe-flash-enabled")!"true">
</#if>
<script type="text/javascript">//<![CDATA[
new Alfresco.getFileUploadInstance().setOptions(
{
adobeFlashEnabled: ${((adobeFlashEnabled!"true") == "true")?string}
});
//]]>
</script>

this file enables the Flash or HTML version of the upload form in Share. (it already exists, the code is files named "file-upload.get*" in

/Alfresco/Tomcat/webapps/share/classes/alfresco/site-webscript/org/alfresco/components/upload directory

there you can find also the flash and the html default code.

the JS should include the file upload js file so:

<#include "../component.head.inc">
<!-- File-Upload -->
<@script type="text/javascript" src="${page.url.context}/res/components/upload/file-upload.js">
</@script>

obviously the source file-upload.js should be having the correct path so if you're working in the shared directory, you should copy there also the files mentioned above.

Hope that helps. I'm referring to an Alfresco 4 Enterprise on RHEL 5.5, where we implemented a similar form (actually we made a dashlet that creates content, not the upload, but it's pretty the same concept. take a look here: https://forums.alfresco.com/en/viewtopic.php?f=48&t=41486

Answer 3

To show new block in Document Detail page's Document Actions' block, you need to add new component to document-details page. In site-data\template-instances\document-details.xml, add

<component>
         <region-id>document-uploadcustom</region-id>
         <url>/components/documentUploadCustom</url>
</component>

Let /components/documentUploadCustom be your webscript url.

In templates\org\alfresco\document-details.ftl, add region for new component like <@region id="document-uploadcustom" scope="template"/> Your code may be as belows:

<@region id="document-actions" scope="template"/>
<@region id="document-tags" scope="template"/>
<@region id="document-links" scope="template"/>
<@region id="document-metadata" scope="template"/>
<@region id="document-uploadcustom" scope="template"/>
<@region id="document-permissions" scope="template"/>
<@region id="document-workflows" scope="template"/>
<@region id="document-versions" scope="template"/>
<@region id="document-publishing" scope="template"/>

How to upload file can be referenced from repo-toolbar.js' s onFileUpload and file-upload.js.