1+ /**
2+ * --------------------------------------------------------------------
3+ * jQuery customfileinput plugin
4+ * Author: Scott Jehl, scott@filamentgroup.com
5+ * Copyright (c) 2009 Filament Group
6+ * licensed under MIT (filamentgroup.com/examples/mit-license.txt)
7+ * --------------------------------------------------------------------
8+ */
9+ $ . fn . customFileInput = function ( ) {
10+ //apply events and styles for file input element
11+ var fileInput = $ ( this )
12+ . addClass ( 'customfile-input' ) //add class for CSS
13+ . mouseover ( function ( ) { upload . addClass ( 'customfile-hover' ) ; } )
14+ . mouseout ( function ( ) { upload . removeClass ( 'customfile-hover' ) ; } )
15+ . focus ( function ( ) {
16+ upload . addClass ( 'customfile-focus' ) ;
17+ fileInput . data ( 'val' , fileInput . val ( ) ) ;
18+ } )
19+ . blur ( function ( ) {
20+ upload . removeClass ( 'customfile-focus' ) ;
21+ $ ( this ) . trigger ( 'checkChange' ) ;
22+ } )
23+ . bind ( 'disable' , function ( ) {
24+ fileInput . attr ( 'disabled' , true ) ;
25+ upload . addClass ( 'customfile-disabled' ) ;
26+ } )
27+ . bind ( 'enable' , function ( ) {
28+ fileInput . removeAttr ( 'disabled' ) ;
29+ upload . removeClass ( 'customfile-disabled' ) ;
30+ } )
31+ . bind ( 'checkChange' , function ( ) {
32+ if ( fileInput . val ( ) && fileInput . val ( ) != fileInput . data ( 'val' ) ) {
33+ fileInput . trigger ( 'change' ) ;
34+ }
35+ } )
36+ . bind ( 'change' , function ( ) {
37+ //get file name
38+ var fileName = $ ( this ) . val ( ) . split ( / \\ / ) . pop ( ) ;
39+ //get file extension
40+ var fileExt = 'customfile-ext-' + fileName . split ( '.' ) . pop ( ) . toLowerCase ( ) ;
41+ //update the feedback
42+ uploadFeedback
43+ . text ( fileName ) //set feedback text to filename
44+ . removeClass ( uploadFeedback . data ( 'fileExt' ) || '' ) //remove any existing file extension class
45+ . addClass ( fileExt ) //add file extension class
46+ . data ( 'fileExt' , fileExt ) //store file extension for class removal on next change
47+ . addClass ( 'customfile-feedback-populated' ) ; //add class to show populated state
48+ //change text of button
49+ uploadButton . text ( 'Change' ) ;
50+ } )
51+ . click ( function ( ) { //for IE and Opera, make sure change fires after choosing a file, using an async callback
52+ fileInput . data ( 'val' , fileInput . val ( ) ) ;
53+ setTimeout ( function ( ) {
54+ fileInput . trigger ( 'checkChange' ) ;
55+ } , 100 ) ;
56+ } ) ;
57+
58+ //create custom control container
59+ var upload = $ ( '<div class="customfile"></div>' ) ;
60+ //create custom control button
61+ var uploadButton = $ ( '<span class="customfile-button" aria-hidden="true">Browse</span>' ) . appendTo ( upload ) ;
62+ //create custom control feedback
63+ var uploadFeedback = $ ( '<span class="customfile-feedback" aria-hidden="true">No file selected...</span>' ) . appendTo ( upload ) ;
64+
65+ //match disabled state
66+ if ( fileInput . is ( '[disabled]' ) ) {
67+ fileInput . trigger ( 'disable' ) ;
68+ }
69+
70+
71+ //on mousemove, keep file input under the cursor to steal click
72+ upload
73+ . mousemove ( function ( e ) {
74+ fileInput . css ( {
75+ 'left' : e . pageX - upload . offset ( ) . left - fileInput . outerWidth ( ) + 20 , //position right side 20px right of cursor X)
76+ 'top' : e . pageY - upload . offset ( ) . top - $ ( window ) . scrollTop ( ) - 3
77+ } ) ;
78+ } )
79+ . insertAfter ( fileInput ) ; //insert after the input
80+
81+ fileInput . appendTo ( upload ) ;
82+
83+ //return jQuery
84+ return $ ( this ) ;
85+ } ;
0 commit comments