Alfresco Share tip: content type selection when uploading a document

Alfresco Share types and form customization is now well understood and documented, as shown by this google search. But that is not the case when customizing the upload form in order to be able to select the type of the document to be uploaded.

At first, we thought that adding this functionality would require performing complex developments and altering the basic document upload action.
We later discovered that this feature was already implemented in Alfresco Share though it is not documented anywhere (neither in official Alfresco documentation nor in the community sites and blogs).
If you take a look at  the file “tomcat\webapps\share\WEB-INF\classes\alfresco\site-webscripts\org\alfresco\components\upload\flash-upload.get.html.ftl”, you’ll notice that while the upload form already contains the required code to generate a select input for the document type, its visibility is conditioned by the test “contentTypes?size == 1”.

         <div id="${args.htmlid}-left-div" class="fileupload-left-div">
            <span class="fileupload-percentage-span hidden"> </span>
            <select class="fileupload-contentType-select <#if (contentTypes?size == 1)>hidden</#if>">
               <#if (contentTypes?size > 0)>
                  <#list contentTypes as contentType>
                     <option value="${contentType.id}">${msg(contentType.value)}
                     </option>
                  </#list>
               </#if>
            </select>
         </div>

And so, it only takes filling in the contentTypes variable in the webscript Javascript controller with the custom document types for the select input to be shown to the final user.
The “contentTypes” variable’s declaration and initialization can be found in this file:  “tomcat\webapps\share\WEB-INF\classes\alfresco\site-webscripts\org\alfresco\components\upload\flash-upload.get.js”. This variable consists of an array of objects with 2 fields:

• id: the Alfresco content type identifier.
• value: the content type label’s key in the webscript properties file.

Find below an example of how to initialize contentTypes variable with multiple content types:

   var contentTypes = [
   {
      id: "cm:content",
      value: "cm_content"
   },
    {
      id: "custom:docJuri",
      value: "custom _docJuri"
   },
    {
      id: "custom:autres",
      value: "custom _autres"
   },
   {
      id:  "custom:presse",
      value: "custom _presse"
   },
   {
      id: "custom:biblio",
      value: "custom _biblio"
   }
    ];

As a result, here’s how the upload form will look like:

Figure 1. Upload form

Now, you should be able to easily define types for your documents when adding them to the repository, as with Alfresco explorer, and then fill in their custom metadata as showing in Figure 2.

Figure 2. Edit metadata form

Hope it was useful, your comments are welcome.