Search code examples
angularjsxpageslotus-domino

Showing attachments from Domino Data Service using angular

I'm getting a whole Domino Document with the

/api/data/documents/unid/

syntax. I've seen that I get a base64-encoded version of the attachment

"contentType": "application/octet-stream; name=\"Spitzbuben.docx\"",

and I'm just wondering what would be a good way to display this to the user using angular - I'm looking for some sort of file upload directive.

Do you have a suggestion?

Update:

The response to the DDS REST GET call to the document actually returns every single attachment as an multipart array; I've actually got the data in memory. I'm just wondering which would be the most elegant way of displaying to the user the fact that he can 'download' one or many of the attachments.

This is the GET call I am using right now: http://magermandemo2.ch/Development/handbuch/handbuch1_0/Handbuch_(1_0)_Dev.nsf/api/data/documents/unid/B011CE4D9E3DC16DC1257DAA00718FBB

And domino adds this (See attached file: Spitzbuben.doc) at the end of the rich-text-rendered-into-HTML:

enter image description here

Solution

  • It was Frank's comment that led to the solution. RFC 2397 defines a 'data-url' method that enables you to directly put the data into the url.

    Here's the HTML:

      <div class="panel panel-default" ng-if="attachments">
    <div class="panel-heading">Attachments</a></div>
    <div class="list-group">
        <a ng-repeat="attachment in attachments" class="list-group-item" download="{{attachment.filename}}"
           ng-href="{{attachment.dataurl}}">{{attachment.filename}}</a>
    </div>
</div>

    And here is the section of the directive that loads the attachments (can be an array:)

       dataService.loadSingleDocumentbyUNIDMultiPart(unid).then(function (data) {
    var receiveddata = angular.fromJson(data);

if (receiveddata.Body) {
    scope.attachments = [];
    var newVal = receiveddata.Body;
    if (newVal) {

        if (mimeObj.contentDisposition) {
            //example:   "contentDisposition": "attachment; filename=\"Spitzbuben.docx\"",
            var regex = /attachment; filename=\"(.*)\"/;
            var match = regex.exec(mimeObj.contentDisposition);
            if (match) {
                // example:  "contentType": "application/octet-stream; name=\"Spitzbuben.docx\"",
                var mediatype = mimeObj.contentType.substring(0, mimeObj.contentType.indexOf(";"));

                // https://www.rfc-editor.org/rfc/rfc2397 dataURL definition
                var thisAttachment = {
                    "filename": match[1],
                    "dataurl": "data:" + mediatype + ";base64" + "," + mimeObj.data
                };
                scope.attachments.push(thisAttachment);
            }
        }
    }
} else {
    // the body has not been received so we clean stuff u
    scope.attachments = null;
}

    You'll also need to explicitly say that these data urls are OK and safe with the following .config setting:

    $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|data):/);