{"id":1354,"date":"2014-01-24T13:15:27","date_gmt":"2014-01-24T11:15:27","guid":{"rendered":"http:\/\/hasselba.ch\/blog\/?p=1354"},"modified":"2014-01-24T13:15:27","modified_gmt":"2014-01-24T11:15:27","slug":"xpages-modify-the-file-selection-button","status":"publish","type":"post","link":"https:\/\/hasselba.ch\/blog\/?p=1354","title":{"rendered":"XPages: Modify the File Selection Button"},"content":{"rendered":"

With Dojo, you can easily customize the file upload button, f.e. to change the label, add additional style sheets or use HTML5 or Flash plugin for uploading.<\/p>\n

Here is basic example which adds a label and a blue border around the button:<\/p>\n

\"\"<\/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 var=\"document1\" formName=\"File\" \/>\r\n\u00a0\u00a0 \u00a0<\/xp:this.data>\r\n\r\n\u00a0\u00a0 \u00a0<xp:scriptBlock id=\"scriptBlockFileUpload\">\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xp:this.value>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<![CDATA[\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0require(['dojo\/parser',\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0 'dojox\/form\/Uploader',\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0 'dojo\/domReady!'], \r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0 function(parser, ready){\r\n\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0parser.parse().then(function(){\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0uploader = new dojox.form.Uploader({\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 name:'#{id:fileUpload1}', \r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 label:'Select Some Files',\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 multiple:false, \r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 style: 'border:5px solid blue;'\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}, '#{id:fileUpload1}');\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 uploader.startup();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\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 });\r\n\u00a0\u00a0 \u00a0\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\u00a0\u00a0 \u00a0<xp:fileUpload id=\"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:button value=\"Submit\" id=\"buttonSubmit\" >\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xp:eventHandler event=\"onclick\" submit=\"true\"\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0refreshMode=\"complete\" immediate=\"false\" save=\"true\" \/>\r\n\u00a0\u00a0 \u00a0<\/xp:button>\r\n\r\n<\/xp:view><\/pre>\n
Have a look at dojox.form.Uploader<\/a> for more details.<\/p>\n","protected":false},"excerpt":{"rendered":"
With Dojo, you can easily customize the file upload button, f.e. to change the label, add additional style sheets or use HTML5 or Flash plugin for uploading. Here is basic example which adds a label and a blue border around … 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":[17,75,19,46,9,81,74],"tags":[47,78,8,77,96,4,12,3],"class_list":["post-1354","post","type-post","status-publish","format-standard","hentry","category-css","category-dojo","category-html","category-html5","category-javascript","category-web","category-xpages","tag-9-0","tag-css","tag-dojo","tag-html","tag-html5","tag-js","tag-web","tag-xpages"],"_links":{"self":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1354","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=1354"}],"version-history":[{"count":1,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1354\/revisions"}],"predecessor-version":[{"id":1355,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1354\/revisions\/1355"}],"wp:attachment":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1354"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1354"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}