{"id":1458,"date":"2014-06-02T21:25:22","date_gmt":"2014-06-02T19:25:22","guid":{"rendered":"http:\/\/hasselba.ch\/blog\/?p=1458"},"modified":"2014-06-02T21:26:33","modified_gmt":"2014-06-02T19:26:33","slug":"xpages-angular-js-fileuploads","status":"publish","type":"post","link":"https:\/\/hasselba.ch\/blog\/?p=1458","title":{"rendered":"XPages & Angular.js: Fileuploads"},"content":{"rendered":"

When using Angular.js you sooner or later want to upload a file to your Domino server. But to do this, you not only need some nice looking frontend, you also need some code in the backend. For the frontend you can use one of the already exsiting modules which are available for Angular.js, for example the angular-file-upload<\/a>. For a quick start, I have choosen to modify the provided Simple example<\/a>.<\/p>\n

After stripping down the example files (just saved the whole website with Firefox), you can import all the files into a new database. Mark Roden has written a very good tutorial<\/a> about the details for this step.<\/p>\n

The WebContent<\/em> folder should look like this:<\/p>\n

\"\"<\/p>\n

Now you have to modify the index.html<\/em> and make all pathes relative:<\/p>\n

\"\"<\/p>\n

When you open the index.html<\/em> in the browser you will see some errors in the console, because of some missing fonts, but we will ignore this issue in this quick example.<\/p>\n

\"\"<\/p>\n

Instead, we are adding a link for a download of an uploaded file:<\/p>\n

&#160;<a download=\"{{ item.file.name }}\" ng-href=\"{{ item.file.dlPath }}\">download<\/a><\/td><\/code><\/pre>\n
\"\"<\/p>\n
The download link will be filled with the URL of the uploaded attachment in the target database after a successfull upload.<\/p>\n
\"\"<\/p>\n
Now it’s time to tell the frontend where to store the file in the backend. For this, you have to modify the controller.js<\/em> and define the target of the upload process. In this example, the target is a XPage named „upload.xsp<\/em>„. After uploading a file to the server, the XPage returns the URL of the attachment as a JSON string. To update the link in the frontend, we bind a function to the event „success<\/em>“ which adds the URL to the current file item:<\/p>\n
angular.module('app', ['angularFileUpload'])\r\n\r\n.controller('TestController', function ($scope, $fileUploader) {\r\n\u00a0\u00a0 \u00a0'use strict';\r\n\r\n\u00a0\u00a0 \u00a0\/\/ create a uploader with options\r\n\u00a0\u00a0\u00a0 var uploader = $scope.uploader = $fileUploader.create({\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0scope: $scope,\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 url: 'upload.xsp'\r\n\u00a0\u00a0\u00a0 });\r\n\r\n\u00a0\u00a0\u00a0 uploader.bind('success', function (event, xhr, item, response) {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/ add the response url to the file item \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 item.file.dlPath = response.url;\r\n\u00a0\u00a0\u00a0 });\r\n\r\n});<\/code><\/pre>\n
\u00a0[This is the complete controler.js which replaces the file from the module’s example.]<\/em><\/p>\n
The XPage handles the uploaded files them directly without a file upload control. Every uploaded file will be attached to a single document, and embedded to the Richtext item „Body<\/em>„. If the upload was successfull, the XPages returns the JSON data containing the URL to the newly created attachment.<\/p>\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<xp:view xmlns:xp=\"http:\/\/www.ibm.com\/xsp\/core\" rendered=\"false\">\r\n\u00a0\u00a0 \u00a0<xp:this.data>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xp:dominoDocument var=\"documentFile\" action=\"editDocument\" concurrencyMode=\"force\" \/>\r\n\u00a0\u00a0 \u00a0<\/xp:this.data>\r\n\r\n\u00a0\u00a0 \u00a0<xp:this.afterRenderResponse>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<![CDATA[#{javascript:\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/**\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0 * saves a uploaded attachment to a datasource\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0 *\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0 * @param ds\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0 *\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0the datasource\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0 * @param rtItemName\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0 *\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0the richtext item to save the file\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0 * @return\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0 *\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0the name of the uploaded file\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0 * @author Sven Hasselbach\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0 *\/\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0function saveAttachment( ds:NotesXspDocument, rtItemName:String ):String {\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/ get the file data\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var con = facesContext.getExternalContext();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var request:com.sun.faces.context.MyHttpServletRequestWrapper = con.getRequest();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var map:java.util.Map = request.getParameterMap();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var fileData:com.ibm.xsp.http.UploadedFile = map.get( \"file\" );\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0if( fileData == null )\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0return;\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/ get the file\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var tempFile:java.io.File = fileData.getServerFile();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var correctedFile = new java.io.File( tempFile.getParentFile().getAbsolutePath() +\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0java.io.File.separator + fileData.getClientFileName() );\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var success = tempFile.renameTo(correctedFile);\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/ create or use an existing RT item\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var rtFiles:NotesRichTextItem = null;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0if(!(ds.getDocument().hasItem( rtItemName ))){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0rtFiles = ds.getDocument().createRichTextItem( rtItemName )\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}else{\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0rtFiles = ds.getDocument().getFirstItem( rtItemName );\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/ embed the file\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0rtFiles.embedObject(lotus.domino.local.EmbeddedObject.EMBED_ATTACHMENT, \"\",\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0correctedFile.getAbsolutePath(), null);\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/ rename the file back for server processing\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0correctedFile.renameTo(tempFile);\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/ save the datasource\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0ds.save();\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/ return the filenam\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0return fileData.getClientFileName();\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/ save the doc\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var file = saveAttachment( documentFile, \"Body\" );\r\n\r\n            \/\/ create the response\r\n            var res = facesContext.getExternalContext().getResponse();\r\n            res.setContentType( \"application\/json\" );\r\n            res.setCharacterEncoding( \"UTF-8\" );\r\n            var writer = res.getWriter();\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0if( file != null ){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/ send a JSON url string back to the client\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var url = documentFile.getDocument().getHttpURL();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var fileUrl = url.replace(\"?OpenDocument\",\"\/$File\/\"+file+\"?OpenElement\");\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0writer.write( '{\"url\": \"' + fileUrl + '\"}' );    \r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}else{\r\n                \/\/ otherwise send empty JSON data\r\n                writer.write( '{}' );\r\n            }\r\n            writer.flush();\r\n            facesContext.responseComplete();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}]]>\r\n\u00a0\u00a0 \u00a0<\/xp:this.afterRenderResponse>\r\n<\/xp:view><\/code><\/pre>\n
After uploading a file, you can see that the file was uploaded successfully in the firebug console:<\/p>\n
\"\"<\/p>\n
When clicking the „download“ link, the file is available to download:<\/p>\n
\"\"<\/p>\n
And the attachment was uploaded to the database:<\/p>\n
\"\"<\/p>\n
That’s it!<\/p>\n","protected":false},"excerpt":{"rendered":"
When using Angular.js you sooner or later want to upload a file to your Domino server. But to do this, you not only need some nice looking frontend, you also need some code in the backend. For the frontend you … Weiterlesen →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[50],"tags":[99,7,77,4,5,12,3],"class_list":["post-1458","post","type-post","status-publish","format-standard","hentry","category-angular-js","tag-angular-js","tag-domino","tag-html","tag-js","tag-ssjs","tag-web","tag-xpages"],"_links":{"self":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1458","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1458"}],"version-history":[{"count":12,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1458\/revisions"}],"predecessor-version":[{"id":1470,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1458\/revisions\/1470"}],"wp:attachment":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1458"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1458"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1458"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}