Ace File Input

by Amir Sharifian

HTML

<link rel="stylesheet" href="http://test.ittavi.com/assets/css/bootstrap.css">
<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/bootstrap.js"></script>
<script src="http://test.ittavi.com/assets/js/ace.js"></script>
<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.full.min.js"></script>
<script src="http://test.ittavi.com/assets/js/jquery-ui-1.10.3.custom.min.js"></script>
<div>
<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>

CSS

div{
  margin-top: 15px;
  padding:10px;
}

JavaScript

jQuery('#id-input-file-3').ace_file_input({
					style:'well',
					btn_choose:'Drop files here or click to choose',
					btn_change:null,
					no_icon:'',
					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 && ! (/^image\/(jpe?g|png|gif|bmp)$/i).test(type) )
											|| ( type.length === 0 && ! (/\.(jpe?g|png|gif|bmp)$/i).test(file.name) )//for android's default browser which gives an empty string for file.type
										) continue;//not an image so don't keep this file
								}
								
								allowed_files.push(file);
							}
							if(allowed_files.length...