Ace File Input

by Rowan Hamilton

HTML

<link rel="stylesheet" href="http://test.ittavi.com/assets/css/ace.css">
<link rel="stylesheet" href="http://test.ittavi.com/assets/css/supportpaynew.css">
<script src="http://test.ittavi.com/assets/js/ace-elements.min.js"></script>
<script src="http://test.ittavi.com/assets/js/jquery-ui-1.10.3.custom.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.3/ace.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
<div class="span4">
										<div class="widget-box">
											<div class="widget-header">
												<h4>Custom File Input</h4>

												<span class="widget-toolbar">
													<a href="#" data-action="collapse">
														<i class="icon-chevron-up"></i>
													</a>

													<a href="#" data-action="close">
														<i class="icon-remove"></i>
													</a>
												</span>
											</div>

											<div class="widget-body">
												<div class="widget-main">
													<input type="file" id="id-input-file-2" />
													<input multiple="" type="file" id="id-input-file-3" />
													<label>
														<input type="checkbox" name="file-format" id="id-file-format" class="ace" />
														<span class="lbl"> Allow only images</span>
													</label>
												</div>
											</div>
										</div>
									</div>

JavaScript

jQuery('#id-input-file-1 , #id-input-file-2').ace_file_input({
					no_file:'No File ...',
					btn_choose:'Choose',
					btn_change:'Change',
					droppable:false,
					onchange:null,
					thumbnail:false //| true | large
					//whitelist:'gif|png|jpg|jpeg'
					//blacklist:'exe|php'
					//onchange:''
					//
				});
				
				jQuery('#id-input-file-3').ace_file_input({
					style:'well',
					btn_choose:'Drop files here or click to choose',
					btn_change:null,
					no_icon:'icon-cloud-upload',
					droppable:true,
					thumbnail:'small',
					//,icon_remove:null//set null, to hide remove/reset button
					/**,before_change:function(files, dropped) {
						//Check an example below
						//or examples/file-upload.html
						return true;
					}*/
					/**,before_remove : function() {
						return true;
					}*/
					
					preview_error:function(filename, error_code) {
						//name of the file that failed
						//error_code values
						//1 = 'FILE_LOAD_FAILED',
						//2 = 'IMAGE_LOAD_FAILED',
						//3 = 'THUMBNAIL_FAILED'
						alert(error_code);
					}
			
				}).on('change', function(){
					//console.log($(this).data('ace_input_files'));
					//console.log($(this).data('ace_input_method'));
				});
				
			
				//dynamically change allowed formats by changing before_change callback function
				jQuery('#id-file-format').removeAttr('checked').on('change', function() {
					var before_change;
					var btn_choose;
					if(this.checked) {
						btn_choose = "Drop images here or click to choose";
						no_icon = "icon-picture";
						before_change = function(files,dropped){
							var allowed_files = [];
							for(var i = 0 ; i < files.length; i++) {
								var file = files[i];
								if(typeof file === "string") {
									//IE8 and browsers that don't support File Object
									if(! (/\.(jpe?g|png|gif|bmp)$/i).test(file) ) 
									return false;
								}
								else {
									var type = $.trim(file.type);
									if( ( type.length > 0 && !...