Writing mime-type handlers in Angular

week15gsoc1

Developing a collaboration platform like sTeam web interface requires careful introspection while rolling out features that involve dealing with media. Any collaboration platform must support as many mime-types as possible, The REST API for sTeam written in pike offers us with the feasibilty of knowing the type of file or mime-type in the response object.
sTeam inbuilt has a mechanism which helps in detecting the mime-type of the file. So the same concept has been extended to the rest api in order to get the mime-type combined in the response object.

The first question that arrives at any user’s mind is what are the mime-types should i support, well basically there are couple of mime-types that can or could be considered in the category of compulsory mime-types that are ought to be supported if you wish to have media content on your application. Let us have a look at the popular or well known mime-types :

  • Text
  • PDF’s
  • Image
  • Audio
  • Video

What if we donot catch the mime-type ?
This is basically a classic question that has the most easiest answer, just ensure that the mime-types which your handler is unable to catch pass them with a flag saying that it is an unknown mime-type. So let us have a look at how it is done :


angular.module('steam')

.controller('workspaceDetailedCtrl', ['$http', '$scope', 'handler', 'localStorageService', 'PDFViewerService', '$sce',
 function ($http, $scope, handler, localStorageService, pdf, $sce) {
  $scope.dataSrc = localStorageService.get('baseurl') + 'home/' + localStorageService.get('currentObjPath')

  $scope.mimeTypeHandler = function () {
    if(localStorageService.get('currentObjMimeType') == 'application/x-unknown-content-type') {
      return 'unknown'
    } else if (localStorageService.get('currentObjMimeType').match(/image\/*/)) {
      return 'image'
    } else if (localStorageService.get('currentObjMimeType') == 'application/pdf') {
      return 'pdf'
    } else if (localStorageService.get('currentObjMimeType').match(/audio\/*/)) {
      return 'audio'
    } else if (localStorageService.get('currentObjMimeType').match(/video\/*/)) {
      return 'video'
    } else if (localStorageService.get('currentObjMimeType').match(/text\/*/) ||
      localStorageService.get('currentObjMimeType') == 'application/x-javascript' ||
      localStorageService.get('currentObjMimeType') == 'application/x-pike') {
      return 'text'
    } else { return 'notfound' }
  }


The best approach for writing a mime-type handler for your application would be :

  • Have a controller that has a function declared for doing the specific operation and pass the mimetype for the object that which you identify, so that the handler can simplify your job in just returning the type of your file
  • Ensure that as many well known mime-types are supported and for the case of new mime-types that depend for specific application just add them to the if...else block
  • Make it a point to catch all the unknown mime-types because when an unknown mime-type is not declared in your handler the browser tends to download the file directly instead of opening the same in your application

NOTE : The service provider localStorageService is very helpful if you have an application that needs to store some data on the user’s/client’s end. So while the user logs into the web interface , localStorageService sets the userpath, objectmimepath and everything else in order to complete the functionality of the application. So gotcha here is that when you have a situation like this localStorageService0 can be useful, since we can both set the data and get the data. Once the user logs out the data is cleared.

Thats it folks,
Happy Hacking !!