{"id":1286,"date":"2013-09-09T21:41:44","date_gmt":"2013-09-09T19:41:44","guid":{"rendered":"http:\/\/hasselba.ch\/blog\/?p=1286"},"modified":"2013-09-09T21:41:44","modified_gmt":"2013-09-09T19:41:44","slug":"quick-n-dirty-ajax-fileuploads","status":"publish","type":"post","link":"https:\/\/hasselba.ch\/blog\/?p=1286","title":{"rendered":"Quick-n-Dirty: Ajax Fileuploads"},"content":{"rendered":"

Here is an example how to upload a file with Ajax to a XPage. It is a simple Javascript, and adds the required fields to the xhr request. This example works in FireFox and Chrome and should work on Domino >=8.5.2.<\/p>\n

<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<xp:view xmlns:xp=\"http:\/\/www.ibm.com\/xsp\/core\">\r\n\r\n\u00a0\u00a0 \u00a0<xp:this.data>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xp:dominoDocument\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var=\"document1\"\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0formName=\"RTItem\"\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0action=\"editDocument\"\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0concurrencyMode=\"force\">\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/xp:dominoDocument>\r\n\u00a0\u00a0 \u00a0<\/xp:this.data>\r\n\r\n\u00a0\u00a0 \u00a0<xp:fileUpload onchange=\"handleFiles(this.files)\"\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0id=\"fileUpload1\"\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0value=\"#{document1.Body}\">\r\n\u00a0\u00a0 \u00a0<\/xp:fileUpload>\r\n\r\n\u00a0\u00a0 \u00a0<xp:eventHandler event=\"onsaveDoc\" submit=\"false\" refreshMode=\"norefresh\" immediate=\"false\" save=\"true\" id=\"saveDoc\" \/>\r\n\r\n\u00a0\u00a0 \u00a0<xp:button\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0value=\"ajaxSave\"\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0id=\"buttonAjax\">\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xp:eventHandler\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0event=\"onclick\"\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0submit=\"false\">\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xp:this.script><![CDATA[sendFiles();]]><\/xp:this.script>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/xp:eventHandler>\r\n\u00a0\u00a0 \u00a0<\/xp:button>\r\n\r\n\u00a0\u00a0 \u00a0<xp:div id=\"fileData\" \/>\r\n\r\n\u00a0\u00a0 \u00a0\u00a0 <xp:scriptBlock id=\"scriptBlockAjax\">\r\n\u00a0\u00a0 \u00a0 \u00a0\u00a0\u00a0 \u00a0<xp:this.value>\r\n\u00a0\u00a0 \u00a0 \u00a0\u00a0\u00a0 \u00a0<![CDATA[\r\n\r\n\u00a0\u00a0 \u00a0 \u00a0\u00a0\u00a0 \u00a0function handleFiles(files) {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var i = 0;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var dataDiv = dojo.byId('#{id:fileData}');\r\n\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var fileList = files;\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 for(i = 0; i < fileList.length; i++)\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var img = document.createElement(\"img\");\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 img.file = fileList[i];\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 img.name = 'no_'+ i;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 img.classList.add(\"fileData\");\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var reader = new FileReader();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 reader.readAsDataURL(fileList[i]);\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 dataDiv.appendChild(img);\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0function FileUpload(img, file) {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0 \u00a0\u00a0 \u00a0var xhr = new XMLHttpRequest();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0this.xhr = xhr;\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 \u00a0 var frm = new FormData;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 frm.append( \"#{id:fileUpload1}\", file);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 frm.append( \"$$viewid\", dojo.byId('view:_id1__VUID').value);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 frm.append( \"$$xspsubmitid\", \"#{id:saveDoc}\");\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 frm.append( \"view:_id1\", \"view:_id1\");\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 xhr.open(\"POST\", \"#{javascript:facesContext.getExternalContext().getRequest().getRequestURI()}\", true);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 xhr.send(frm);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0function sendFiles(){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 var files = document.querySelectorAll(\".fileData\");\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 for(var i = 0; i < files.length; i++)\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0 \u00a0\u00a0\u00a0 \u00a0new FileUpload(files[i], files[i].file);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 }\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0]]>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/xp:this.value>\r\n\u00a0\u00a0 \u00a0<\/xp:scriptBlock>\r\n\r\n<\/xp:view><\/code><\/pre>\n
The fileupload control executes the javascript method handleFiles<\/em> when a new file is selected. This method „converts“ the file to a DOM image and attaches it to the DIV fileData<\/em>.<\/p>\n
When clicking the button ajaxSend<\/em>, the sendFiles<\/em> method is fired and sends all selected files with xhr Requests to the server. The value of the $$submitid<\/em> identifies a server side event which saves the document with the received attachment as new document.<\/p>\n
Keep in mind: There is NO full refresh.<\/p>\n
If you selecting some file in the browser…<\/p>\n
\"\"<\/p>\n
.. and click on „ajaxSave<\/em>„, the files are posted to the server:<\/p>\n
\"\"<\/p>\n
The server side event saves the uploaded files to new documents:<\/p>\n
\"\"<\/p>\n","protected":false},"excerpt":{"rendered":"
Here is an example how to upload a file with Ajax to a XPage. It is a simple Javascript, and adds the required fields to the xhr request. This example works in FireFox and Chrome and should work on Domino … 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":[75,9,76,81,74,24],"tags":[34,33,47,8,7,4,25,5,12,3,85],"class_list":["post-1286","post","type-post","status-publish","format-standard","hentry","category-dojo","category-javascript","category-ssjs","category-web","category-xpages","category-xsp","tag-8-5-2","tag-8-5-3","tag-9-0","tag-dojo","tag-domino","tag-js","tag-partial-refresh","tag-ssjs","tag-web","tag-xpages","tag-xsp"],"_links":{"self":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1286","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=1286"}],"version-history":[{"count":9,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1286\/revisions"}],"predecessor-version":[{"id":1295,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1286\/revisions\/1295"}],"wp:attachment":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1286"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1286"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}