├── LICENSE-MIT
├── README.md
├── src
    ├── jquery-filestyle.css
    ├── jquery-filestyle.js
    ├── jquery-filestyle.min.css
    └── jquery-filestyle.min.js
└── test
    ├── index.html
    └── upload.php


/LICENSE-MIT:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2017 Markus Lima
 2 | 
 3 | Permission is hereby granted, free of charge, to any person
 4 | obtaining a copy of this software and associated documentation
 5 | files (the "Software"), to deal in the Software without
 6 | restriction, including without limitation the rights to use,
 7 | copy, modify, merge, publish, distribute, sublicense, and/or sell
 8 | copies of the Software, and to permit persons to whom the
 9 | Software is furnished to do so, subject to the following
10 | conditions:
11 | 
12 | The above copyright notice and this permission notice shall be
13 | included in all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
17 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
19 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
20 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
21 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
22 | OTHER DEALINGS IN THE SOFTWARE.
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # [jQuery Filestyle v2.1.0](http://markusslima.github.io/jquery-filestyle/)
 2 | 
 3 | Personalize your input file and let the beautiful.
 4 | 
 5 | ------------------------------------------------------------------------------------
 6 | # Alert
 7 | 
 8 | ###**Please send to (issues) problems with the plugin, also send more details as:**
 9 | * Browser
10 | * Version
11 | * Examples using [jsfiddle.net](https://jsfiddle.net/)
12 | * Other plugins involved
13 | * Etc.
14 |  
15 | **Detail the most of your problem to speed up the correction process.**
16 | 
17 | Thank you!
18 | 
19 | -------------------------------------------------------------------------------------
20 | 
21 | Maintained by [Markus Lima](https://github.com/markusslima) [@markusslima](https://twitter.com/markusslima)
22 | 
23 | ### Getting Started, Documentation and Examples
24 | http://markusslima.github.io/jquery-filestyle/
25 | 
26 | ### Bug tracker
27 | 
28 | Have a bug or a feature request? [Please open a new issue](https://github.com/markusslima/jquery-filestyle/issues).
29 | 
30 | ### Copyright and license
31 | 
32 | MIT Licence.
33 | 


--------------------------------------------------------------------------------
/src/jquery-filestyle.css:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * jquery-filestyle
  3 |  * doc: http://markusslima.github.io/jquery-filestyle/
  4 |  * github: https://github.com/markusslima/jquery-filestyle
  5 |  *
  6 |  * Copyright (c) 2017 Markus Vinicius da Silva Lima
  7 |  * Version 2.1.0
  8 |  * Licensed under the MIT license.
  9 |  */
 10 | .jfilestyle {
 11 | 	display: inline-block;
 12 | 	margin: 0px 0px 10px 0px;
 13 | 	padding: 0px;
 14 | 	position: relative;
 15 | 	border-collapse: separate;
 16 | }
 17 | 
 18 | div.jfilestyle label, div.jfilestyle input {
 19 | 	font-family: sans-serif;
 20 | }
 21 | 
 22 | div.jfilestyle input {
 23 | 	border: 1px solid #c0c0c0;
 24 | 	background: #d9d9d9;
 25 | 	margin: 0px -5px 0px 0px;
 26 | 	vertical-align: middle;
 27 | 	padding: 10px 15px;
 28 | 	font-size: 14px;
 29 | 	border-radius: 0px;
 30 | 	color: #8d8d8d;
 31 | 	cursor: default;
 32 |     line-height: normal;
 33 | }
 34 | 
 35 | div.jfilestyle label {
 36 | 	display: inline-block;
 37 | 	border: 1px solid #c0c0c0;
 38 | 	background: #ffffff;
 39 | 	padding: 10px 15px;
 40 | 	color: #0662ba;
 41 | 	vertical-align: middle;
 42 | 	line-height: normal;
 43 | 	text-align: center;
 44 | 	margin: 0px;
 45 | 	font-size: 14px;
 46 | 	width: auto;
 47 | 	border-radius: 0px;
 48 |     font-weight: normal;
 49 | }
 50 | 
 51 | div.jfilestyle.jfilestyle-corner input:last-child,
 52 | div.jfilestyle.jfilestyle-corner label:last-child {
 53 | 	margin-left: -1px;
 54 | }
 55 | 
 56 | div.jfilestyle label[disabled] {
 57 | 	pointer-events: none;
 58 | 	opacity: 0.6;
 59 | 	filter: alpha(opacity=65);
 60 | 	cursor: not-allowed;
 61 | }
 62 | 
 63 | div.jfilestyle label:hover {
 64 | 	cursor: pointer;
 65 | 	opacity: 0.9;
 66 | }
 67 | 
 68 | div.jfilestyle .count-jfilestyle {
 69 | 	background: #303030;
 70 | 	color: #fff;
 71 | 	border-radius: 50%;
 72 | 	padding: 1px 5px;
 73 | 	font-size: 12px;
 74 | 	vertical-align: middle;
 75 | }
 76 | 
 77 | /** 
 78 |  * THEMES
 79 |  */
 80 | div.jfilestyle.jfilestyle-theme-blue input {/**/}
 81 | div.jfilestyle.jfilestyle-theme-blue label {
 82 | 	border-color: #438eff;
 83 | 	background: #438eff;
 84 | 	color: #fff;
 85 | }
 86 | div.jfilestyle.jfilestyle-theme-green input {/**/}
 87 | div.jfilestyle.jfilestyle-theme-green label {
 88 | 	border-color: #18a063;
 89 | 	background: #18a063;
 90 | 	color: #fff;
 91 | }
 92 | div.jfilestyle.jfilestyle-theme-yellow input {/**/}
 93 | div.jfilestyle.jfilestyle-theme-yellow label {
 94 | 	border-color: #e8c821;
 95 | 	background: #e8c821;
 96 | 	color: #fff;
 97 | }
 98 | div.jfilestyle.jfilestyle-theme-black input {/**/}
 99 | div.jfilestyle.jfilestyle-theme-black label {
100 | 	border-color: #424242;
101 | 	background: #424242;
102 | 	color: #fff;
103 | }
104 | div.jfilestyle.jfilestyle-theme-red input {/**/}
105 | div.jfilestyle.jfilestyle-theme-red label {
106 | 	border-color: #f33f3f;
107 | 	background: #f33f3f;
108 | 	color: #fff;
109 | }
110 | div.jfilestyle.jfilestyle-theme-purple input {/**/}
111 | div.jfilestyle.jfilestyle-theme-purple label {
112 | 	border-color: #873aff;
113 | 	background: #873aff;
114 | 	color: #fff;
115 | }
116 | div.jfilestyle.jfilestyle-theme-asphalt input {/**/}
117 | div.jfilestyle.jfilestyle-theme-asphalt label {
118 | 	border-color: #435673;
119 | 	background: #435673;
120 | 	color: #fff;
121 | }


--------------------------------------------------------------------------------
/src/jquery-filestyle.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * jquery-filestyle
  3 |  * doc: http://markusslima.github.io/jquery-filestyle/
  4 |  * github: https://github.com/markusslima/jquery-filestyle
  5 |  *
  6 |  * Copyright (c) 2017 Markus Vinicius da Silva Lima
  7 |  * Version 2.1.0
  8 |  * Licensed under the MIT license.
  9 |  */
 10 | (function ($) {
 11 |     "use strict";
 12 |     
 13 |     var nextId = 0;
 14 |     
 15 |     var JFilestyle = function (element, options) {
 16 |         this.options = options;
 17 |         this.$elementjFilestyle = [];
 18 |         this.$element = $(element);
 19 |     };
 20 | 
 21 |     JFilestyle.prototype = {
 22 |         clear: function () {
 23 |             this.$element.val('');
 24 |             this.$elementjFilestyle.find(':text').val('');
 25 |             this.$elementjFilestyle.find('.count-jfilestyle').remove();
 26 |         },
 27 | 
 28 |         destroy: function () {
 29 |             this.$element
 30 |                 .removeAttr('style')
 31 |                 .removeData('jfilestyle')
 32 |                 .val('');
 33 |             this.$elementjFilestyle.remove();
 34 |         },
 35 | 
 36 |         dragdrop : function (value) {
 37 |             if (value === true || value === false) {
 38 |                 this.options.dragdrop = value;
 39 |             } else {
 40 |                 return this.options.dragdrop;
 41 |             }
 42 |         },
 43 |         
 44 |         disabled : function (value) {
 45 | 			if (value === true) {
 46 | 				if (!this.options.disabled) {
 47 | 					this.$element.attr('disabled', 'true');
 48 | 					this.$elementjFilestyle.find('label').attr('disabled', 'true');
 49 | 					this.options.disabled = true;
 50 | 				}
 51 | 			} else if (value === false) {
 52 | 				if (this.options.disabled) {
 53 | 					this.$element.removeAttr('disabled');
 54 | 					this.$elementjFilestyle.find('label').removeAttr('disabled');
 55 | 					this.options.disabled = false;
 56 | 				}
 57 | 			} else {
 58 | 				return this.options.disabled;
 59 | 			}
 60 | 		},
 61 | 		
 62 | 		buttonBefore : function (value) {
 63 | 			if (value === true) {
 64 | 				if (!this.options.buttonBefore) {
 65 | 					this.options.buttonBefore = true;
 66 | 					if (this.options.input) {
 67 | 						this.$elementjFilestyle.remove();
 68 | 						this.constructor();
 69 | 						this.pushNameFiles();
 70 | 					}
 71 | 				}
 72 | 			} else if (value === false) {
 73 | 				if (this.options.buttonBefore) {
 74 | 					this.options.buttonBefore = false;
 75 | 					if (this.options.input) {
 76 | 						this.$elementjFilestyle.remove();
 77 | 						this.constructor();
 78 | 						this.pushNameFiles();
 79 | 					}
 80 | 				}
 81 | 			} else {
 82 | 				return this.options.buttonBefore;
 83 | 			}
 84 | 		},
 85 | 
 86 |         input: function (value) {
 87 |             if (value === true) {
 88 |                 if (!this.options.input) {
 89 |                     this.options.input = true;
 90 |                     this.$elementjFilestyle.find('label').before(this.htmlInput());
 91 |                     this.$elementjFilestyle.find('.count-jfilestyle').remove();
 92 | 					this.pushNameFiles();
 93 |                 }
 94 |             } else if (value === false) {
 95 |                 if (this.options.input) {
 96 |                     this.options.input = false;
 97 |                     this.$elementjFilestyle.find(':text').remove();
 98 |                     var files = this.pushNameFiles();
 99 | 					if (files.length > 0) {
100 | 						this.$elementjFilestyle.find('label').append(' <span class="count-jfilestyle">' + files.length + '</span>');
101 | 					}
102 |                 }
103 |             } else {
104 |                 return this.options.input;
105 |             }
106 |         },
107 | 
108 |         text: function (value) {
109 |             if (value !== undefined) {
110 |                 this.options.text = value;
111 |                 this.$elementjFilestyle.find('label span').html(this.options.text);
112 |             } else {
113 |                 return this.options.text;
114 |             }
115 |         },
116 | 
117 |         theme: function (value) {
118 |             if (value !== undefined) {
119 |                 console.log(this.$elementjFilestyle.attr('class').replace(/.*(jfilestyle-theme-.*).*/, '$1'));
120 |                 this.$elementjFilestyle.removeClass(this.$elementjFilestyle.attr('class').replace(/.*(jfilestyle-theme-.*).*/, '$1'));
121 |                 this.options.theme = value;
122 |                 this.$elementjFilestyle.addClass('jfilestyle-theme-'+this.options.theme);
123 |             } else {
124 |                 return this.options.theme;
125 |             }
126 |         },
127 | 
128 |         inputSize: function (value) {
129 |             if (value !== undefined) {
130 |                 this.options.inputSize = value;
131 |                 this.$elementjFilestyle.find(':text').css('width', this.options.inputSize);
132 |             } else {
133 |                 return this.options.inputSize;
134 |             }
135 |         },
136 |         
137 | 		placeholder : function(value) {
138 | 			if (value !== undefined) {
139 | 				this.options.placeholder = value;
140 | 				this.$elementjFilestyle.find(':text').attr('placeholder', value);
141 | 			} else {
142 | 				return this.options.placeholder;
143 | 			}
144 | 		},
145 | 
146 |         htmlInput: function () {
147 |             if (this.options.input) {
148 |                 return '<input type="text" style="width:'+this.options.inputSize+'" placeholder="'+ this.options.placeholder +'" disabled> ';
149 |             } else {
150 |                 return '';
151 |             }
152 |         },
153 |         
154 |         // puts the name of the input files
155 |         // return files
156 | 		pushNameFiles : function() {
157 | 			var content = '', files = [];
158 | 			if (this.$element[0].files === undefined) {
159 | 				files[0] = {
160 | 					'name' : this.$element.value
161 | 				};
162 | 			} else {
163 | 				files = this.$element[0].files;
164 | 			}
165 | 
166 | 			for (var i = 0; i < files.length; i++) {
167 | 				content += files[i].name.split("\\").pop() + ', ';
168 | 			}
169 | 
170 | 			if (content !== '') {
171 | 				this.$elementjFilestyle.find(':text').val(content.replace(/\, $/g, ''));
172 | 			} else {
173 | 				this.$elementjFilestyle.find(':text').val('');
174 | 			}
175 | 			
176 | 			return files;
177 | 		},
178 | 
179 |         constructor: function () {
180 |             var _self = this,
181 |                 html = '',
182 |                 id = _self.$element.attr('id'),
183 |                 $label,
184 |                 files = [];
185 | 
186 |             if (id === '' || !id) {
187 |                 id = 'jfilestyle-' + nextId;
188 |                 _self.$element.attr({'id': id});
189 |                 nextId++;
190 |             }
191 |             
192 |             html = '<span class="focus-jfilestyle">'+
193 |                      '<label for="'+id+'" ' + (_self.options.disabled ? 'disabled="true"' : '') + '>'+
194 |                        '<span>'+_self.options.text+'</span>'+
195 |                      '</label>'+
196 |                    '</span>';
197 |             
198 |             if (_self.options.buttonBefore === true) {
199 | 	            html = html + _self.htmlInput();
200 |             } else {
201 | 	            html = _self.htmlInput() + html;
202 |             }
203 | 
204 |             _self.$elementjFilestyle = $('<div class="jfilestyle '
205 |                 +(_self.options.input?'jfilestyle-corner':'')+' '
206 |                 +(this.options.buttonBefore ? ' jfilestyle-buttonbefore' : '')+' '
207 |                 +(_self.options.theme?'jfilestyle-theme-'+_self.options.theme:'')+'">'
208 |                 +'<div name="filedrag"></div>'
209 |                 +html
210 |                 +'</div>');
211 |             _self.$elementjFilestyle.find('.focus-jfilestyle')
212 |                 .attr('tabindex', "0")
213 |                 .keypress(function (e) {
214 |                     if (e.keyCode === 13 || e.charCode === 32) {
215 |                         _self.$elementjFilestyle.find('label').click();
216 |                         return false;
217 |                     }
218 |                 });
219 | 
220 |             // hidding input file and add filestyle
221 |             _self.$element
222 |                 .css({'position': 'absolute', 'clip': 'rect(0px 0px 0px 0px)'})
223 |                 .attr('tabindex', "-1")
224 |                 .after(_self.$elementjFilestyle);
225 | 			
226 | 			if (_self.options.disabled) {
227 | 				_self.$element.attr('disabled', 'true');
228 | 			}
229 | 
230 |             _self.$elementjFilestyle.find('[name="filedrag"]').css({
231 |                 position: 'absolute',
232 |                 width: '100%',
233 |                 height: _self.$elementjFilestyle.height()+'px',
234 |                 'z-index': -1
235 |             });
236 | 			
237 |             // Getting input file value
238 |             _self.$element.change(function () {
239 |             	var files = _self.pushNameFiles();
240 |             	
241 |             	if (_self.options.input == false) {
242 | 					if (_self.$elementjFilestyle.find('.count-jfilestyle').length == 0) {
243 | 						_self.$elementjFilestyle.find('label').append(' <span class="count-jfilestyle">' + files.length + '</span>');
244 | 					} else if (files.length == 0) {
245 | 						_self.$elementjFilestyle.find('.count-jfilestyle').remove();
246 | 					} else {
247 | 						_self.$elementjFilestyle.find('.count-jfilestyle').html(files.length);
248 | 					}
249 | 				} else {
250 | 					_self.$elementjFilestyle.find('.count-jfilestyle').remove();
251 | 				}
252 | 
253 |                 _self.options.onChange(files);
254 |             });
255 | 
256 |             // Check if browser is Firefox
257 |             if (window.navigator.userAgent.search(/firefox/i) > -1) {
258 |                 // Simulating choose file for firefox
259 |                 this.$elementjFilestyle.find('label').click(function () {
260 |                     _self.$element.click();
261 |                     return false;
262 |                 });
263 |             }
264 | 
265 |             /** DRAG AND DROP EVENTS **/
266 |             $(document)
267 |                 .on('dragover', function (e) {
268 |                     e.preventDefault();
269 |                     e.stopPropagation();
270 |                     if (!_self.options.dragdrop) {
271 |                         $('[name="filedrag"]').css('z-index', '9');
272 |                     }
273 |                 })
274 |                 .on('drop', function (e) {
275 |                     e.preventDefault();
276 |                     e.stopPropagation();
277 |                     if (!_self.options.dragdrop) {
278 |                         $('[name="filedrag"]').css('z-index', '-1');
279 |                     }
280 |                 });
281 | 
282 |             _self.$elementjFilestyle.find('[name="filedrag"]')
283 |                 .on('dragover',
284 |                     function (e) {
285 |                         e.preventDefault();
286 |                         e.stopPropagation();
287 |                     }
288 |                 )
289 |                 .on('dragenter',
290 |                     function (e) {
291 |                         e.preventDefault();
292 |                         e.stopPropagation();
293 |                     }
294 |                 )
295 |                 .on('drop',
296 |                     function (e) {
297 |                         if (e.originalEvent.dataTransfer && !_self.options.disabled && _self.options.dragdrop) {
298 |                             if (e.originalEvent.dataTransfer.files.length) {
299 |                                 e.preventDefault();
300 |                                 e.stopPropagation();
301 |                                 _self.$element[0].files = e.originalEvent.dataTransfer.files;
302 |                                 var files = _self.pushNameFiles();
303 |                 
304 |                                 if (_self.options.input == false) {
305 |                                     if (_self.$elementjFilestyle.find('.count-jfilestyle').length == 0) {
306 |                                         _self.$elementjFilestyle.find('label').append(' <span class="count-jfilestyle">' + files.length + '</span>');
307 |                                     } else if (files.length == 0) {
308 |                                         _self.$elementjFilestyle.find('.count-jfilestyle').remove();
309 |                                     } else {
310 |                                         _self.$elementjFilestyle.find('.count-jfilestyle').html(files.length);
311 |                                     }
312 |                                 } else {
313 |                                     _self.$elementjFilestyle.find('.count-jfilestyle').remove();
314 |                                 }
315 | 
316 |                                 $('[name="filedrag"]').css('z-index', '-1');
317 |                             }
318 |                         }
319 |                     }
320 |                 );
321 |         }
322 |     };
323 | 
324 |     var old = $.fn.jfilestyle;
325 | 
326 |     $.fn.jfilestyle = function (option, value) {
327 |         var get = '',
328 |             element = this.each(function () {
329 |                 if ($(this).attr('type') === 'file') {
330 |                     var $this = $(this),
331 |                         data = $this.data('jfilestyle'),
332 |                         options = $.extend({}, $.fn.jfilestyle.defaults, option, typeof option === 'object' && option);
333 | 
334 |                     if (!data) {
335 |                         $this.data('jfilestyle', (data = new JFilestyle(this, options)));
336 |                         data.constructor();
337 |                     }
338 | 
339 |                     if (typeof option === 'string') {
340 |                         get = data[option](value);
341 |                     }
342 |                 }
343 |             });
344 | 
345 |         if (typeof get !== undefined) {
346 |             return get;
347 |         } else {
348 |             return element;
349 |         }
350 |     };
351 | 
352 |     $.fn.jfilestyle.defaults = {
353 |         'text': 'Choose file',
354 |         'input': true,
355 |         'disabled': false,
356 |         'buttonBefore': false,
357 |         'inputSize': '200px',
358 |         'placeholder': '',
359 |         'dragdrop': true,
360 |         'theme': 'default',
361 |         'onChange': function () {}
362 |     };
363 | 
364 |     $.fn.jfilestyle.noConflict = function () {
365 |         $.fn.jfilestyle = old;
366 |         return this;
367 |     };
368 | 
369 |     $(function() {
370 |         // Data attributes register
371 |         $('.jfilestyle').each(function () {
372 |             var $this = $(this),
373 |                 options = {
374 |                     'text': $this.attr('data-text'),
375 |                     'input': $this.attr('data-input') !== 'false',
376 |                     'disabled': $this.attr('data-disabled') === 'true',
377 |                     'buttonBefore': $this.attr('data-buttonBefore') === 'true',
378 |                     'inputSize': $this.attr('data-inputSize'),
379 |                     'placeholder': $this.attr('data-placeholder'),
380 |                     'theme': $this.attr('data-theme'),
381 |                     'dragdrop': $this.attr('data-dragdrop') !== 'false'
382 |                 };
383 |     
384 |             $this.jfilestyle(options);
385 |         });
386 |     });
387 | })(window.jQuery);


--------------------------------------------------------------------------------
/src/jquery-filestyle.min.css:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * jquery-filestyle
 3 |  * doc: http://markusslima.github.io/jquery-filestyle/
 4 |  * github: https://github.com/markusslima/jquery-filestyle
 5 |  *
 6 |  * Copyright (c) 2017 Markus Vinicius da Silva Lima
 7 |  * Version 2.1.0
 8 |  * Licensed under the MIT license.
 9 |  */
10 | .jfilestyle{display:inline-block;margin:0 0 10px;padding:0;position:relative;border-collapse:separate}div.jfilestyle input,div.jfilestyle label{padding:10px 15px;line-height:normal;font-size:14px;vertical-align:middle;font-family:sans-serif}div.jfilestyle input{border:1px solid silver;background:#d9d9d9;margin:0 -5px 0 0;border-radius:0;color:#8d8d8d;cursor:default}div.jfilestyle label{display:inline-block;border:1px solid silver;background:#fff;color:#0662ba;text-align:center;margin:0;width:auto;border-radius:0;font-weight:400}div.jfilestyle.jfilestyle-corner input:last-child,div.jfilestyle.jfilestyle-corner label:last-child{margin-left:-1px}div.jfilestyle label[disabled]{pointer-events:none;opacity:.6;filter:alpha(opacity=65);cursor:not-allowed}div.jfilestyle label:hover{cursor:pointer;opacity:.9}div.jfilestyle .count-jfilestyle{background:#303030;color:#fff;border-radius:50%;padding:1px 5px;font-size:12px;vertical-align:middle}div.jfilestyle.jfilestyle-theme-blue label{border-color:#438eff;background:#438eff;color:#fff}div.jfilestyle.jfilestyle-theme-green label{border-color:#18a063;background:#18a063;color:#fff}div.jfilestyle.jfilestyle-theme-yellow label{border-color:#e8c821;background:#e8c821;color:#fff}div.jfilestyle.jfilestyle-theme-black label{border-color:#424242;background:#424242;color:#fff}div.jfilestyle.jfilestyle-theme-red label{border-color:#f33f3f;background:#f33f3f;color:#fff}div.jfilestyle.jfilestyle-theme-purple label{border-color:#873aff;background:#873aff;color:#fff}div.jfilestyle.jfilestyle-theme-asphalt label{border-color:#435673;background:#435673;color:#fff}


--------------------------------------------------------------------------------
/src/jquery-filestyle.min.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * jquery-filestyle
 3 |  * doc: http://markusslima.github.io/jquery-filestyle/
 4 |  * github: https://github.com/markusslima/jquery-filestyle
 5 |  *
 6 |  * Copyright (c) 2017 Markus Vinicius da Silva Lima
 7 |  * Version 2.1.0
 8 |  * Licensed under the MIT license.
 9 |  */
10 | !function(e){"use strict";var t=0,i=function(t,i){this.options=i,this.$elementjFilestyle=[],this.$element=e(t)};i.prototype={clear:function(){this.$element.val(""),this.$elementjFilestyle.find(":text").val(""),this.$elementjFilestyle.find(".count-jfilestyle").remove()},destroy:function(){this.$element.removeAttr("style").removeData("jfilestyle").val(""),this.$elementjFilestyle.remove()},dragdrop:function(e){return e!==!0&&e!==!1?this.options.dragdrop:void(this.options.dragdrop=e)},disabled:function(e){if(e===!0)this.options.disabled||(this.$element.attr("disabled","true"),this.$elementjFilestyle.find("label").attr("disabled","true"),this.options.disabled=!0);else{if(e!==!1)return this.options.disabled;this.options.disabled&&(this.$element.removeAttr("disabled"),this.$elementjFilestyle.find("label").removeAttr("disabled"),this.options.disabled=!1)}},buttonBefore:function(e){if(e===!0)this.options.buttonBefore||(this.options.buttonBefore=!0,this.options.input&&(this.$elementjFilestyle.remove(),this.constructor(),this.pushNameFiles()));else{if(e!==!1)return this.options.buttonBefore;this.options.buttonBefore&&(this.options.buttonBefore=!1,this.options.input&&(this.$elementjFilestyle.remove(),this.constructor(),this.pushNameFiles()))}},input:function(e){if(e===!0)this.options.input||(this.options.input=!0,this.$elementjFilestyle.find("label").before(this.htmlInput()),this.$elementjFilestyle.find(".count-jfilestyle").remove(),this.pushNameFiles());else{if(e!==!1)return this.options.input;if(this.options.input){this.options.input=!1,this.$elementjFilestyle.find(":text").remove();var t=this.pushNameFiles();t.length>0&&this.$elementjFilestyle.find("label").append(' <span class="count-jfilestyle">'+t.length+"</span>")}}},text:function(e){return void 0===e?this.options.text:(this.options.text=e,void this.$elementjFilestyle.find("label span").html(this.options.text))},theme:function(e){return void 0===e?this.options.theme:(console.log(this.$elementjFilestyle.attr("class").replace(/.*(jfilestyle-theme-.*).*/,"$1")),this.$elementjFilestyle.removeClass(this.$elementjFilestyle.attr("class").replace(/.*(jfilestyle-theme-.*).*/,"$1")),this.options.theme=e,this.$elementjFilestyle.addClass("jfilestyle-theme-"+this.options.theme),void 0)},inputSize:function(e){return void 0===e?this.options.inputSize:(this.options.inputSize=e,void this.$elementjFilestyle.find(":text").css("width",this.options.inputSize))},placeholder:function(e){return void 0===e?this.options.placeholder:(this.options.placeholder=e,void this.$elementjFilestyle.find(":text").attr("placeholder",e))},htmlInput:function(){return this.options.input?'<input type="text" style="width:'+this.options.inputSize+'" placeholder="'+this.options.placeholder+'" disabled> ':""},pushNameFiles:function(){var e="",t=[];void 0===this.$element[0].files?t[0]={name:this.$element.value}:t=this.$element[0].files;for(var i=0;i<t.length;i++)e+=t[i].name.split("\\").pop()+", ";return""!==e?this.$elementjFilestyle.find(":text").val(e.replace(/\, $/g,"")):this.$elementjFilestyle.find(":text").val(""),t},constructor:function(){var i=this,n="",l=i.$element.attr("id");""!==l&&l||(l="jfilestyle-"+t,i.$element.attr({id:l}),t++),n='<span class="focus-jfilestyle"><label for="'+l+'" '+(i.options.disabled?'disabled="true"':"")+"><span>"+i.options.text+"</span></label></span>",i.options.buttonBefore===!0?n+=i.htmlInput():n=i.htmlInput()+n,i.$elementjFilestyle=e('<div class="jfilestyle '+(i.options.input?"jfilestyle-corner":"")+" "+(this.options.buttonBefore?" jfilestyle-buttonbefore":"")+" "+(i.options.theme?"jfilestyle-theme-"+i.options.theme:"")+'"><div name="filedrag"></div>'+n+"</div>"),i.$elementjFilestyle.find(".focus-jfilestyle").attr("tabindex","0").keypress(function(e){return 13===e.keyCode||32===e.charCode?(i.$elementjFilestyle.find("label").click(),!1):void 0}),i.$element.css({position:"absolute",clip:"rect(0px 0px 0px 0px)"}).attr("tabindex","-1").after(i.$elementjFilestyle),i.options.disabled&&i.$element.attr("disabled","true"),i.$elementjFilestyle.find('[name="filedrag"]').css({position:"absolute",width:"100%",height:i.$elementjFilestyle.height()+"px","z-index":-1}),i.$element.change(function(){var e=i.pushNameFiles();0==i.options.input?0==i.$elementjFilestyle.find(".count-jfilestyle").length?i.$elementjFilestyle.find("label").append(' <span class="count-jfilestyle">'+e.length+"</span>"):0==e.length?i.$elementjFilestyle.find(".count-jfilestyle").remove():i.$elementjFilestyle.find(".count-jfilestyle").html(e.length):i.$elementjFilestyle.find(".count-jfilestyle").remove(),i.options.onChange(e)}),window.navigator.userAgent.search(/firefox/i)>-1&&this.$elementjFilestyle.find("label").click(function(){return i.$element.click(),!1}),e(document).on("dragover",function(t){t.preventDefault(),t.stopPropagation(),i.options.dragdrop||e('[name="filedrag"]').css("z-index","9")}).on("drop",function(t){t.preventDefault(),t.stopPropagation(),i.options.dragdrop||e('[name="filedrag"]').css("z-index","-1")}),i.$elementjFilestyle.find('[name="filedrag"]').on("dragover",function(e){e.preventDefault(),e.stopPropagation()}).on("dragenter",function(e){e.preventDefault(),e.stopPropagation()}).on("drop",function(t){if(t.originalEvent.dataTransfer&&!i.options.disabled&&i.options.dragdrop&&t.originalEvent.dataTransfer.files.length){t.preventDefault(),t.stopPropagation(),i.$element[0].files=t.originalEvent.dataTransfer.files;var n=i.pushNameFiles();0==i.options.input?0==i.$elementjFilestyle.find(".count-jfilestyle").length?i.$elementjFilestyle.find("label").append(' <span class="count-jfilestyle">'+n.length+"</span>"):0==n.length?i.$elementjFilestyle.find(".count-jfilestyle").remove():i.$elementjFilestyle.find(".count-jfilestyle").html(n.length):i.$elementjFilestyle.find(".count-jfilestyle").remove(),e('[name="filedrag"]').css("z-index","-1")}})}};var n=e.fn.jfilestyle;e.fn.jfilestyle=function(t,n){var l="",s=this.each(function(){if("file"===e(this).attr("type")){var s=e(this),o=s.data("jfilestyle"),a=e.extend({},e.fn.jfilestyle.defaults,t,"object"==typeof t&&t);o||(s.data("jfilestyle",o=new i(this,a)),o.constructor()),"string"==typeof t&&(l=o[t](n))}});return void 0!==typeof l?l:s},e.fn.jfilestyle.defaults={text:"Choose file",input:!0,disabled:!1,buttonBefore:!1,inputSize:"200px",placeholder:"",dragdrop:!0,theme:"default",onChange:function(){}},e.fn.jfilestyle.noConflict=function(){return e.fn.jfilestyle=n,this},e(function(){e(".jfilestyle").each(function(){var t=e(this),i={text:t.attr("data-text"),input:"false"!==t.attr("data-input"),disabled:"true"===t.attr("data-disabled"),buttonBefore:"true"===t.attr("data-buttonBefore"),inputSize:t.attr("data-inputSize"),placeholder:t.attr("data-placeholder"),theme:t.attr("data-theme"),dragdrop:"false"!==t.attr("data-dragdrop")};t.jfilestyle(i)})})}(window.jQuery);


--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<meta charset="utf-8">
  5 | 		<title>jQuery FileStyle 2.0.0 - jquery customization input html file</title>
  6 | 		<link href="../src/jquery-filestyle.min.css" rel="stylesheet" />
  7 | 		<style>
  8 | 			body {
  9 | 				font-family: sans-serif;
 10 | 			}
 11 | 			form label {
 12 | 				width: 150px;
 13 | 				display: inline-block;
 14 | 			}
 15 | 		</style>
 16 | 	</head>
 17 | 
 18 | 	<body>
 19 | 		<h2>Upload Teste</h2>
 20 | 		<form action="upload.php" enctype="multipart/form-data" method="post">
 21 | 			<input type="file" name="example" id="input01">
 22 | 			<button type="submit">
 23 | 				Enviar
 24 | 			</button>
 25 | 		</form>
 26 | 		<h2>Options</h2>
 27 | 		<form>
 28 | 			<label for="input02">Custom button text</label>
 29 | 			<input type="file" id="input02">
 30 | 			<br>
 31 | 
 32 | 			<label for="input03">No text field</label>
 33 | 			<input type="file" id="input03">
 34 | 			<br>
 35 | 			<label for="input04">Event Change</label>
 36 | 			<input type="file" id="input04">
 37 | 			<br>
 38 | 			<label for="input06">Input size</label>
 39 | 			<input type="file" id="input06">
 40 | 			<br>
 41 | 			
 42 | 			<label for="input07">Placeholder</label>
 43 | 			<input type="file" id="input07">
 44 | 			<br>
 45 | 		</form>
 46 | 
 47 | 		<h2>Methods</h2>
 48 | 		<form>
 49 | 			<label for="input08">Clear</label>
 50 | 			<input type="file" id="input08">
 51 | 			<button id="clear" type="button">
 52 | 				Clear
 53 | 			</button>
 54 | 			<br>
 55 | 
 56 | 			<label for="input09">Toggle input</label>
 57 | 			<input type="file" id="input09">
 58 | 			<button id="toggleInput" type="button">
 59 | 				Toggle input
 60 | 			</button>
 61 | 			<br>
 62 | 
 63 | 			<label for="input10">Set theme Blue</label>
 64 | 			<input type="file" id="input10">
 65 | 			<button id="theme" type="button">
 66 | 				Blue theme
 67 | 			</button>
 68 | 			<br>
 69 | 
 70 | 			<label for="input12">Destroy</label>
 71 | 			<input type="file" id="input12">
 72 | 			<button id="destroy" type="button">
 73 | 				Destroy
 74 | 			</button>
 75 | 			<br>
 76 | 
 77 | 
 78 | 			<label for="input13">Multiple</label>
 79 | 			<input type="file" id="input13" multiple="multiple">
 80 | 			<br>
 81 | 			
 82 | 			<label for="input14">Disabled</label>
 83 | 			<input type="file" id="input14">
 84 | 			<br>
 85 | 			
 86 | 			<label for="input15">Button before</label>
 87 | 			<input type="file" id="input15">
 88 | 		</form>
 89 | 
 90 | 		<h2>Advanced selector jquery</h2>
 91 | 		<form>
 92 | 			<input type="file" class="test">
 93 | 			<br>
 94 | 			<input type="file" class="test">
 95 | 			<br>
 96 | 			<input type="file" class="test">
 97 | 			<br>
 98 | 			<input type="file" class="test">
 99 | 		</form>
100 | 
101 | 		<h2>Data attributes</h2>
102 | 		<form>
103 | 			<input type="file" class="jfilestyle" data-icon="false" data-dragdrop="false">
104 | 			<br>
105 | 			<input type="file" class="jfilestyle" data-buttonText="Find" data-input="false">
106 | 			<br>
107 | 			<input type="file" class="jfilestyle" data-size="300px">
108 | 			<br>
109 | 			<input type="file" class="jfilestyle" data-buttonText="Open">
110 | 			<br>
111 | 		</form>
112 | 
113 | 		<h2>Themes</h2>
114 | 		<form>
115 | 			<input type="file" class="jfilestyle" data-theme="blue" data-text="blue">
116 | 			<br>
117 | 			<input type="file" class="jfilestyle" data-theme="green" data-text="green">
118 | 			<br>
119 | 			<input type="file" class="jfilestyle" data-theme="yellow" data-text="yellow">
120 | 			<br>
121 | 			<input type="file" class="jfilestyle" data-theme="black" data-text="black">
122 | 			<br>
123 | 			<input type="file" class="jfilestyle" data-theme="red" data-text="red">
124 | 			<br>
125 | 			<input type="file" class="jfilestyle" data-theme="purple" data-text="purple">
126 | 			<br>
127 | 			<input type="file" class="jfilestyle" data-theme="asphalt" data-text="asphalt">
128 | 			<br>
129 | 		</form>
130 | 		<br>
131 | 		<br>
132 | 		<br>
133 | 		<br>
134 | 		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
135 | 		<script type="text/javascript" src="../src/jquery-filestyle.min.js"></script>
136 | 		<script type="text/javascript">
137 | 			$('#input01').jfilestyle()
138 | 
139 | 			$('#input02').jfilestyle({
140 | 				text : 'My filestyle',
141 | 				dragdrop: false
142 | 			});
143 | 
144 | 			$('#input03').jfilestyle({
145 | 				input : false
146 | 			});
147 | 			$('#input04').jfilestyle({
148 | 				onChange : function (e) {
149 | 					alert(e)
150 | 				}
151 | 			});
152 | 
153 | 			$('#input06').jfilestyle({
154 | 				inputSize : '100px'
155 | 			});
156 | 			
157 | 			$('#input07').jfilestyle({
158 | 				placeholder: 'My text placeholder'
159 | 			});
160 | 			$('#input08').jfilestyle();
161 | 
162 | 			$('#clear').click(function() {
163 | 				$('#input08').jfilestyle('clear');
164 | 			});
165 | 
166 | 			$('#input09').jfilestyle();
167 | 
168 | 			$('#toggleInput').click(function() {
169 | 				var fs = $('#input09');
170 | 				if (fs.jfilestyle('input'))
171 | 					fs.jfilestyle('input', false);
172 | 				else
173 | 					fs.jfilestyle('input', true);
174 | 			});
175 | 
176 | 			$('#input10').jfilestyle();
177 | 
178 | 			$('#theme').click(function() {
179 | 				var fs = $('#input10');
180 | 				if (fs.jfilestyle('theme') == 'default') {
181 | 					$(this).html('Default theme');
182 | 					fs.jfilestyle('theme', 'blue');
183 | 				} else {
184 | 					$(this).html('Blue theme');
185 | 					fs.jfilestyle('theme', 'default');
186 | 				}
187 | 			});
188 | 			
189 | 
190 | 			$('#input12').jfilestyle({
191 | 				theme : 'red'
192 | 			});
193 | 
194 | 			$('#input13').jfilestyle();
195 | 			$('#input14').jfilestyle({disabled: true});
196 | 			$('#input15').jfilestyle({buttonBefore: true});
197 | 
198 | 			$('#destroy').click(function() {
199 | 				if ($('#input12').data('jfilestyle')) {
200 | 					$('#input12').jfilestyle('destroy');
201 | 					$(this).html('Construct');
202 | 				} else {
203 | 					$('#input12').jfilestyle();
204 | 					$(this).html('Destroy');
205 | 				}
206 | 			});
207 | 
208 | 			$('.test').jfilestyle();
209 | 		</script>
210 | s	</body>
211 | </html>
212 | 


--------------------------------------------------------------------------------
/test/upload.php:
--------------------------------------------------------------------------------
 1 | <?php 
 2 | 
 3 | $message = '';
 4 | $dir_upload = 'upload/';
 5 | $max_size = 2000000;
 6 | 
 7 | $file = $_FILES['example'];
 8 | 
 9 | if ($file['size'] <= $max_size && $file['size'] > 0) {
10 | 	$new_name = time() . '-' . $file['name'];
11 | 	$copied = copy($file['tmp_name'], $dir_upload . $new_name);
12 | 
13 | 	if ($copied) {
14 | 		$message = 'Ok!';
15 | 	} else {
16 | 		$message = 'Erro!';
17 | 	}
18 | } else {
19 | 	$message = 'Max file size 2mb!';
20 | }
21 | 
22 | echo json_encode(array("message" => $message));
23 | 
24 | ?>
25 | 


--------------------------------------------------------------------------------