Module: File

File

Add support for styling input file fields. A custom element is added behind the browser default input file field, and the file field is made transparent to create the illusion of a custom element. Options can be passed to extend the defaults.
Source:

Example

var DEFAULTS = {
     active: true, // active by default
     ready: function() {}, // callback when module is ready.
     // Thats the default 'size' for a button
     // it is used to address some issues on firefox to apply the correct size.
     'BUTTON_BROWSER_SIZE': 36,
     customEle: 'a', // default element for handle.
     containerEle: 'div', // default element for container.
     autoHide: true, // will auto hide html element by default
     classPrefix: 'custom-', // prefix used for class.
     holderTxt: "Upload..", // default text for input file placeholder
     hideCss: { // styles can be overwritten or added.
         opacity: '0',
         filter: 'alpha(opacity=0)',
         position: 'absolute',
         top: '0px',
         left: '0px',
         '-moz-opacity': '0',
         '-khtml-opacity': '0'
     },
     elCss: { // styles can be overwritten or added.
         display: "block",
         "text-align": "left",
         "-moz-appearance": "none",
         "-webkit-appearance": "none"
     },
     customContainerCss: { // styles can be overwritten or added.
         position: 'relative'
     },
     customElCss: { // styles can be overwritten or added.
         display: "block",
         overflow: "hidden",
         'white-space': "nowrap",
         'text-overflow': "ellipsis"
     },
     element: obj, // input file field.
     events: [], // custom events can be added.
     validators: [] // custom validators can be added.
};

customformsjs.module.File(DEFAULTS);