Custom Uploads with Aikau

[ddraper]

Introduction

This question came up on the forums which highlights a couple of issues worth exploring. First of all is that people occasionally don't know how to approach Aikau development because of the different approach it takes towards UI development. If you're new to Aikau then I would always recommend working through the tutorial on GitHub and read this blog post which gives a good overview of the framework.

The main thing to understand about Aikau is that it is a framework geared up towards customization (although it can be used just as effectively for creating new applications). The UI for a page is defined in a JSON model because it's much easier to manipulate a JSON model through code than HTML. Widgets are intentionally and written to be easily configured, reused and extended. When building a page you won't be writing any HTML or CSS - but you might be if you're writing your own widgets.

Building a Custom Solution

The use case in the question it to provide a way in which the user can select a location to upload a file and then select the file to be uploaded. There is also another requirement relating to "check some config file and split xml" which I don't quite follow so I will gloss over for the time being - hopefully the question author will be able to provide some more information on this requirement.

My first thought when I looked at the question was about the existing widgets that might be used to build this solution. Aikau already provides:

• A form control for selecting folders on the Alfresco Repository
• A form control for selecting files from the operating system
• A form widget for placing form controls in
• A service that can be used to show form controls in a dialog
• A button widget to launch actions
• A service for handling file uploads

I figured that the approach to take would be to add a button that publishes a request to the DialogService to show a form containing a ContainerPicker and FileSelect that on confirmation will publish a request to the FileUploadService to upload the selected file to the selected destination.

The JavaScript controller for the WebScript to represent a new page would like this:

model.jsonModel = {
  services: [
    "alfresco/services/FileUploadService",
    "alfresco/services/ContentService",
    "alfresco/services/DialogService",
    "alfresco/services/DocumentService",
    "alfresco/services/SiteService",
    "alfresco/services/NotificationService"
  ],
  widgets: [
    {
      name: "alfresco/buttons/AlfButton",
      config: {
        label: "Upload",
        publishTopic: "ALF_CREATE_FORM_DIALOG_REQUEST",
        publishPayload: {
        dialogId: "UPLOAD_DIALOG",
        dialogTitle: "Upload a file",
        formSubmissionTopic: "ALF_UPLOAD_REQUEST",
        formSubmissionPayloadMixin: {
          targetData: {
            siteId: null,
            containerId: null
          }
        },
        widgets: [
          {
            name: "alfresco/forms/controls/ContainerPicker",
            config: {
              name: "targetData.destination",
              label: "Upload location"
            }
          },
          {
            name: "alfresco/forms/controls/FileSelect",
            config: {
              name: "files",
              label: "Select a file to upload"
            }
          }
        ]
      }
    }
   }
 ]
};‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

We'd need to provide a descriptor file...

<webscript>
  <shortname>Upload</shortname>
  <description>An example of uploading</description>
  <family>blog-sample-pages</family>
  <url>/upload</url>
</webscript>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

...and a template file...

<@processJsonModel/>‍‍‍

...which when accessed via /share/page/dp/ws/upload would result in the following...

This video shows the resulting page in action

Using an Existing Solution

Then I remembered that I'd already previously put together an upload widget for this purpose. This widget not only provides the ability to select a file and a target upload location, but it provides a target zone for files to just be dropped onto that triggers a location selection dialog.

So the JavaScript controller for the page could look like this:

model.jsonModel = {
  services: [
    "alfresco/services/FileUploadService",
    "alfresco/services/ContentService",
    "alfresco/services/DialogService",
    "alfresco/services/DocumentService",
    "alfresco/services/SiteService",
    "alfresco/services/NotificationService"
  ],
  widgets: [
    {
      name: "alfresco/upload/UploadTarget"
    }
  ]
};‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

This video shows the page in action.

These models could easily be applied to customizations to existing pages - for example you could create a new dashlet for the UploadTarget or add a new menu item to the header in Share so that you can upload new content from any page in the application.

If you've found this post useful or interesting then it would be great if you could like or share it from the top of the page!