Implementing a file exchange platform with Alfresco & angularJS

Exchanging your files with external users like partners, agencies etc. is still a challenge for enterprise IT departments. Employees will use emails or cloud-based file sharing services like dropbox & Co if the external user has no access to the internal  IT systems.

Sharing files & collaborating via emails leads to a bunch of problems and inefficient processes that have been already discussed a thousand times.

The usage of cloud-based file sharing services will put your CIO in panic – at least if we’re talking about germany & europe & sensitive information like product drawings, price-lists or your latest R&D project data.

One way out is to run an Alfresco Share instance in the DMZ … but – at least from my point of view – Alfresco Share is too complex for such a use case. Yes, you can use it and strip it down, but I wanted to get a much more simple UI … and I’ve to admit that I wanted to promote the single page webapp paradigm 😉

Inspired by Laurens Alfresco Vault approach (https://github.com/lfridael/vault) and my experiences with bootstrap and jQuery my choice had been made: Usage of a MVC/MVM framework is a MUST. Thus, I did some research & some basis prototyping and decided to implement the app using AngularJS, Bootstrap, AngularUI-Bootstrap & jQuery (file upload) plus some nice things like font-awesome, modernizr & momentJS.

I don’t have mentioned that the decision regarding the backend was set in stone: Alfresco – big surprise, he 😉
ASCII architecture diagramm:

Solution – End-user perspective

Disclaimer: The project itself is not available under a Open Source License – it’s a commercial solution offering by my current employer (fme).

From a end-user perspective the app contains of thre main components: Registration, New File Collection & My File Collections.

Registration:

  1. Provide account information incl. contact person ( employee who has to approve the registration)
  2. e-mail based account verification
  3. e-mail based registration approval for the contact person

New File Collection – upload & share a collection of files (can be restricted to a group of users):

  • Name of the File Collection
  • Users to share with (of course with typeahead)
  • Files to Share (multi files & drag&drop)

My File Collection:

  • browse your file collections & navigate into a file collection
  • Actions like update existing files & upload new files, delete & download
  • manage (Sub-)folders
  • manage file collection expiration

Solution – developer perspective

Developing the solution with my colleagues was fun. Why? because we were able to boost our developing velocity to the next level – I’ll give a quick example: a typeahead-control to add users to a file collection :

Repo: We just use Alfresco’s api/people?filter= WebScript

JS:

  1. add a new Angular Service to be injected in our Controller:
  2.  controller:
  3.  template:

Some other quick examples:

Our FileCollectionService based on ng-resource & a custom REST-API (WebScripts):

A custom directive to render the list of items in a file collection based on their content type (the templates themselves just contain a bit html markup & expressions like {{item.name}} to show the name of the document or folder):

You’d like to filter & sort your item list? Just add a few $filters:

Long story short

Alfresco’s WebScript API is a fantastic single page webapp enabler – You can easily leverage the existing API or add your own specific API. These WebScripts play nicely with Angular’s $resource-service.

If you’re fan of testable code, dependency injection, data binding & much more then take a look at angularJS – more than ever if you’re interested in reusable UI components (aka directives)!

One thought on “Implementing a file exchange platform with Alfresco & angularJS

  1. Pingback: Alfresco File Sharing Solutions at your Disposal - CONTENTREICH

Leave a Reply

Your email address will not be published. Required fields are marked *