When using the default file upload control in a Bootstrap application, the default file upload button does not fit anymore to the design:<\/p>\n
<\/p>\n
To fix this issue, you can use a small jQuery plugin named Twitter Bootstrap File Input<\/a>. When this plugin is added to your XPage, the button will look like this:<\/p>\n <\/p>\n To initialize the jQuery plugin, you have to call it with a selector which selects all DOM elements of type file<\/em>:<\/p>\n The description of the button can be changed by setting the title<\/em> attribute. Additionally, you can choose if the file name will be displayed inside or outside of the button:<\/p>\n To place it inside, you need to add the attribute\u00a0data-filename-placemen<\/em>t to the file upload control:<\/p>\n Because I have added it to a Custom Control and use it multiple times on a XPage, I have changed the original code and added a flag to prevent multiple calls, otherwise all file elements are modified over and over again:<\/p>\n Here is the modified code:<\/p>\n Thanks to Gregory Pike<\/a> for his good work. The jQuery plugin is distributed under Apache License<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" When using the default file upload control in a Bootstrap application, the default file upload button does not fit anymore to the design: To fix this issue, you can use a small jQuery plugin named Twitter Bootstrap File Input. When … Weiterlesen <\/p>\n
<xp:scriptBlock\r\n id=\"scriptBlockInitFile\">\r\n <xp:this.value>\r\n <![CDATA[\r\n $(document).ready( \r\n function() {\r\n $('input[type=file]').bootstrapFileInput();\r\n }\r\n );\r\n ]]>\r\n <\/xp:this.value>\r\n<\/xp:scriptBlock><\/code><\/pre>\n<\/p>\n
<\/p>\n
<xp:fileUpload\r\n id=\"fileUploadControl\"\r\n value=\"#{document.Body}\"\r\n title=\"Datei ausw\u00e4hlen\">\r\n <xp:this.attrs>\r\n <xp:attr\r\n name=\"data-filename-placement\"\r\n value=\"inside\" \/>\r\n <\/xp:this.attrs>\r\n<\/xp:fileUpload><\/code><\/pre>\n<\/p>\n
\/*\r\n\u00a0 Bootstrap - File Input\r\n\u00a0 ======================\r\n\r\n\u00a0 This is meant to convert all file input tags into a set of elements that displays consistently in all browsers.\r\n\r\n\u00a0 Converts all\r\n\u00a0 <input type=\"file\">\r\n\u00a0 into Bootstrap buttons\r\n\u00a0 <a>Browse<\/a>\r\n\r\n\u00a0 Sven Hasselbach, 26.03.2014:\r\n\u00a0 Added a fix to prevent multiple wrapping \r\n\r\n*\/\r\n(function($) {\r\n\r\n$.fn.bootstrapFileInput = function() {\r\n\r\n\u00a0 this.each(function(i,elem){\r\n\r\n\u00a0\u00a0\u00a0 var $elem = $(elem);\r\n\r\n\u00a0\u00a0\u00a0 \/\/ Maybe some fields don't need to be standardized.\r\n\u00a0\u00a0\u00a0 if (typeof $elem.attr('data-bfi-disabled') != 'undefined') {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 return;\r\n\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0 \/\/ --- Fix to prevent multiple wrapping \r\n\u00a0\u00a0 \u00a0\/\/ Sven Hasselbach, 26.03.2014\r\n\r\n\u00a0\u00a0\u00a0 \/\/ check for an existing 'wrapped' attribute'\r\n\u00a0\u00a0\u00a0 if(!!$elem.attr('wrapped'))\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0return;\r\n\r\n\u00a0\u00a0\u00a0 \/\/ add the 'wrapped' attribute\r\n\u00a0\u00a0\u00a0 $elem.attr('wrapped', 'true');\r\n \/\/ --- End of Fix\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0 \/\/ Set the word to be displayed on the button\r\n\u00a0\u00a0\u00a0 var buttonWord = 'Browse';\r\n\r\n\u00a0\u00a0\u00a0 if (typeof $elem.attr('title') != 'undefined') {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 buttonWord = $elem.attr('title');\r\n\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0 var className = '';\r\n\r\n\u00a0\u00a0\u00a0 if (!!$elem.attr('class')) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 className = ' ' + $elem.attr('class');\r\n\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0 \/\/ Now we're going to wrap that input field with a Bootstrap button.\r\n\u00a0\u00a0\u00a0 \/\/ The input will actually still be there, it will just be float above and transparent (done with the CSS).\r\n\u00a0\u00a0\u00a0 $elem.wrap('<a><\/a>').parent().prepend($('<span><\/span>').html(buttonWord));\r\n\u00a0 })\r\n\r\n\u00a0 \/\/ After we have found all of the file inputs let's apply a listener for tracking the mouse movement.\r\n\u00a0 \/\/ This is important because the in order to give the illusion that this is a button in FF we actually need to move the button from the file input under the cursor. Ugh.\r\n\u00a0 .promise().done( function(){\r\n\r\n\u00a0\u00a0\u00a0 \/\/ As the cursor moves over our new Bootstrap button we need to adjust the position of the invisible file input Browse button to be under the cursor.\r\n\u00a0\u00a0\u00a0 \/\/ This gives us the pointer cursor that FF denies us\r\n\u00a0\u00a0\u00a0 $('.file-input-wrapper').mousemove(function(cursor) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 var input, wrapper,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 wrapperX, wrapperY,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 inputWidth, inputHeight,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 cursorX, cursorY;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ This wrapper element (the button surround this file input)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 wrapper = $(this);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ The invisible file input element\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 input = wrapper.find(\"input\");\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ The left-most position of the wrapper\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 wrapperX = wrapper.offset().left;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ The top-most position of the wrapper\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 wrapperY = wrapper.offset().top;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ The with of the browsers input field\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 inputWidth= input.width();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ The height of the browsers input field\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 inputHeight= input.height();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/The position of the cursor in the wrapper\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 cursorX = cursor.pageX;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 cursorY = cursor.pageY;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/The positions we are to move the invisible file input\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ The 20 at the end is an arbitrary number of pixels that we can shift the input such that cursor is not pointing at the end of the Browse button but somewhere nearer the middle\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 moveInputX = cursorX - wrapperX - inputWidth + 20;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ Slides the invisible input Browse button to be positioned middle under the cursor\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 moveInputY = cursorY- wrapperY - (inputHeight\/2);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ Apply the positioning styles to actually move the invisible file input\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 input.css({\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 left:moveInputX,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 top:moveInputY\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\u00a0\u00a0\u00a0 });\r\n\r\n\u00a0\u00a0\u00a0 $('body').on('change', '.file-input-wrapper input[type=file]', function(){\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 var fileName;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 fileName = $(this).val();\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ Remove any previous file names\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 $(this).parent().next('.file-input-name').remove();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 if (!!$(this).prop('files') && $(this).prop('files').length > 1) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 fileName = $(this)[0].files.length+' files';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 else {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 fileName = fileName.substring(fileName.lastIndexOf('\\\\') + 1, fileName.length);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ Don't try to show the name if there is none\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 if (!fileName) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 return;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 var selectedFileNamePlacement = $(this).data('filename-placement');\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 if (selectedFileNamePlacement === 'inside') {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ Print the fileName inside\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $(this).siblings('span').html(fileName);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $(this).attr('title', fileName);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 } else {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ Print the fileName aside (right after the the button)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $(this).parent().after('<span>'+fileName+'<\/span>');\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0 });\r\n\r\n\u00a0 });\r\n\r\n};\r\n\r\n\/\/ Add the styles before the first stylesheet\r\n\/\/ This ensures they can be easily overridden with developer styles\r\nvar cssHtml = '<style>'+\r\n\u00a0 '.file-input-wrapper { overflow: hidden; position: relative; cursor: pointer; z-index: 1; }'+\r\n\u00a0 '.file-input-wrapper input[type=file], .file-input-wrapper input[type=file]:focus, .file-input-wrapper input[type=file]:hover { position: absolute; top: 0; left: 0; cursor: pointer; opacity: 0; filter: alpha(opacity=0); z-index: 99; outline: 0; }'+\r\n\u00a0 '.file-input-name { margin-left: 8px; }'+\r\n\u00a0 '<\/style>';\r\n$('link[rel=stylesheet]').eq(0).before(cssHtml);\r\n\r\n})(jQuery);\r\n<\/code><\/pre>\n