Educational

Filer.js

Written by

Saim Khalid

in

Filer.js is a jQuery plugin for quickly and easily implementing of uploading files.

A Simple of filer.js example as shown below −

<html xmlns ="https://www.w3.org/1999/xhtml"><head><meta http-equiv ="Content-Type" content ="text/html; charset = utf-8"/><link href ="css/jquery.filer.css" type ="text/css" rel ="stylesheet"/><link href ="css/themes/jquery.filer-dragdropbox-theme.css" 

     type ="text/css" rel ="stylesheet"/&gt;&lt;!--jQuery--&gt;&lt;script type ="text/javascript" 
     src ="https://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;&lt;script type ="text/javascript" src ="js/jquery.filer.min.js"&gt;&lt;/script&gt;&lt;script type ="text/javascript"&gt;$(document).ready(function(){$('#input1').filer();$('.file_input').filer({
           showThumbs:true,
           templates:{
              box:'&lt;ul class = "jFiler-item-list"&gt;&lt;/ul&gt;',
              item: '&lt;li class="jFiler-item"&gt;\
					
                 &lt;div class="jFiler-item-container"&gt;\
                    &lt;div class="jFiler-item-inner"&gt;\
						
                       &lt;div class="jFiler-item-thumb"&gt;\
                          &lt;div class="jFiler-item-status"&gt;&lt;/div&gt;\
                          &lt;div class="jFiler-item-info"&gt;\
                             &lt;span class="jFiler-item-title"&gt;&lt;
                                b title ="{{fi-name}}"&gt;{{fi-name | 
                                limitTo:25}}&lt;/b&gt;&lt;/span&gt;\
                          &lt;/div&gt;\
                          {{fi-image}}\
                       &lt;/div&gt;\
							
                       &lt;div class="jFiler-item-assets jFiler-row"&gt;\
                          &lt;ul class="list-inline pull-left"&gt;\
                             &lt;li&gt;&lt;span class="jFiler-item-others"&gt;{{fi-icon}}{{fi-size2}}&lt;/span&gt;&lt;/li&gt;\
                          &lt;/ul&gt;\
								
                          &lt;ul class="list-inline pull-right"&gt;\
                             &lt;li&gt;&lt;a class= "icon-jfi-trash
                                jFiler-item-trash-action"&gt;&lt;/a&gt;&lt;/li&gt;\
                          &lt;/ul&gt;\
								
                       &lt;/div&gt;\
							
                    &lt;/div&gt;\
                 &lt;/div&gt;\
              &lt;/li&gt;',
					
              itemAppend: '&lt;li class="jFiler-item"&gt;\
					
                 &lt;div class="jFiler-item-container"&gt;\
                    &lt;div class="jFiler-item-inner"&gt;\
                       &lt;div class="jFiler-item-thumb"&gt;\
                          &lt;div class="jFiler-item-status"&gt;&lt;/div&gt;\
                          &lt;div class="jFiler-item-info"&gt;\
                             &lt;span class="jFiler-item-title"&gt;&lt;
                                b title ="{{fi-name}}"&gt;{{fi-name |
                                limitTo:25}}&lt;/b&gt;&lt;/span&gt;\
                          &lt;/div&gt;\
                          {{fi-image}}\
                       &lt;/div&gt;\
								
                       &lt;div class="jFiler-item-assets jFiler-row"&gt;\
                          &lt;ul class="list-inline pull-left"&gt;\
                             &lt;span class="jFiler-item-others"&gt;{{fi-icon}}{{fi-size2}}&lt;/span&gt;\
                          &lt;/ul&gt;\
									
                          &lt;ul class="list-inline pull-right"&gt;\
                             &lt;li&gt;&lt;a class= "icon-jfi-trash 
                                jFiler-item-trash-action"&gt;&lt;/a&gt;&lt;/li&gt;\
                          &lt;/ul&gt;\
									
                       &lt;/div&gt;\
								
                    &lt;/div&gt;\
                 &lt;/div&gt;\
              &lt;/li&gt;',
					
              progressBar:'&lt;div class = "bar"&gt;&lt;/div&gt;',
              itemAppendToEnd:true,
              removeConfirmation:true,
					
              _selectors:{
                 list:'.jFiler-item-list',
                 item:'.jFiler-item',
                 progressBar:'.bar',
                 remove:'.jFiler-item-trash-action',}},
				
           addMore:true,
				
           files:[{
              name:"appended_file.jpg",
              size:5453,
              type:"image/jpg",
              file:"https://dummyimage.com/158x113/f9f9f9/191a1a.jpg",},{
              name:"appended_file_2.png",
              size:9503,
              type:"image/png",
              file:"https://dummyimage.com/158x113/f9f9f9/191a1a.png",}]});$('#input2').filer({
           limit:null,
           maxSize:null,
           extensions:null,
           changeInput: '
				
           &lt;div class="jFiler-input-dragDrop"&gt;&lt;div class="jFiler-input-inner"&gt;&lt;div class="jFiler-input-icon"&gt;&lt;i class="icon-jfi-cloud-up-o"&gt;&lt;/i&gt;&lt;/div&gt;&lt;div class="jFiler-input-text"&gt;&lt;h3&gt;Drag&amp;Drop files here&lt;/h3&gt;&lt;span style = "display:inline-block; 
                       margin:15px 0"&gt;or&lt;/span&gt;&lt;/div&gt;&lt;a class="jFiler-input-choose-btn blue"&gt;Browse Files&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;',
				
           showThumbs:true,
           appendTo:null,
           theme:"dragdropbox",
				
           templates:{
              box:'&lt;ul class = "jFiler-item-list"&gt;&lt;/ul&gt;',
              item: '&lt;li class="jFiler-item"&gt;\
                 &lt;div class="jFiler-item-container"&gt;\
                    &lt;div class="jFiler-item-inner"&gt;\
							
                       &lt;div class="jFiler-item-thumb"&gt;\
                          &lt;div class="jFiler-item-status"&gt;&lt;/div&gt;\
									
                          &lt;div class="jFiler-item-info"&gt;\
                             &lt;span class="jFiler-item-title"&gt;&lt;b title ="{{fi-name}}"&gt;{{fi-name | 
                                limitTo:25}}&lt;/b&gt;&lt;/span&gt;\
                          &lt;/div&gt;\
									
                          {{fi-image}}\
                       &lt;/div&gt;\
								
                       &lt;div class="jFiler-item-assets jFiler-row"&gt;\
                          &lt;ul class="list-inline pull-left"&gt;\
                             &lt;li&gt;{{fi-progressBar}}&lt;/li&gt;\
                          &lt;/ul&gt;\
									
                          &lt;ul class="list-inline pull-right"&gt;\
                             &lt;li&gt;&lt;a class= "icon-jfi-trash
                                jFiler-item-trash-action"&gt;&lt;/a&gt;&lt;/li&gt;\
                          &lt;/ul&gt;\
									
                       &lt;/div&gt;\
								
                    &lt;/div&gt;\
                 &lt;/div&gt;\
              &lt;/li&gt;',
					
              itemAppend: '&lt;li class="jFiler-item"&gt;\
                 &lt;div class="jFiler-item-container"&gt;\
                    &lt;div class="jFiler-item-inner"&gt;\
							
                       &lt;div class="jFiler-item-thumb"&gt;\
                          &lt;div class="jFiler-item-status"&gt;&lt;/div&gt;\
									
                          &lt;div class="jFiler-item-info"&gt;\
                             &lt;span class="jFiler-item-title"&gt;&lt;b title ="{{fi-name}}"&gt;{{fi-name | 
                                limitTo:25}}&lt;/b&gt;&lt;/span&gt;\
                          &lt;/div&gt;\
									
                          {{fi-image}}\
                       &lt;/div&gt;\
								
                       &lt;div class="jFiler-item-assets jFiler-row"&gt;\
                          &lt;ul class="list-inline pull-left"&gt;\
                             &lt;span class="jFiler-item-others"&gt;{{fi-icon}}{{fi-size2}}&lt;/span&gt;\
                          &lt;/ul&gt;\
									
                          &lt;ul class="list-inline pull-right"&gt;\
                             &lt;li&gt;&lt;a class= "icon-jfi-trash
                                jFiler-item-trash-action"&gt;&lt;/a&gt;&lt;/li&gt;\
                          &lt;/ul&gt;\
									
                       &lt;/div&gt;\
								
                    &lt;/div&gt;\
                 &lt;/div&gt;\
              &lt;/li&gt;',
					
              progressBar:'&lt;div class = "bar"&gt;&lt;/div&gt;',
              itemAppendToEnd:false,
              removeConfirmation:false,
					
              _selectors:{
                 list:'.jFiler-item-list',
                 item:'.jFiler-item',
                 progressBar:'.bar',
                 remove:'.jFiler-item-trash-action',}},
				
           uploadFile:{
              url:"./php/upload.php",
              data:{},
              type:'POST',
              enctype:'multipart/form-data',beforeSend:function(){},success:function(data, el){var parent = el.find(".jFiler-jProgressBar").parent();
						
                 el.find(".jFiler-jProgressBar").fadeOut("slow",function(){$("&lt;div class= \"jFiler-item-others text-success\"
                          &gt;&lt;i class= \"icon-jfi-check-circle\"&gt;&lt;/i&gt; Success
                       &lt;/div&gt;").hide().appendTo(parent).fadeIn("slow");});},error:function(el){var parent = el.find(".jFiler-jProgressBar").parent();
						
                 el.find(".jFiler-jProgressBar").fadeOut("slow",function(){$("&lt;div class= \"jFiler-item-others text-error\"
                          &gt;&lt;i class= \"icon-jfi-minus-circle\"&gt;&lt;/i&gt; Error
                       &lt;/div&gt;").hide().appendTo(parent).fadeIn("slow");});},
					
              statusCode:{},onProgress:function(){},},
				
           dragDrop:{dragEnter:function(){},dragLeave:function(){},drop:function(){},},
				
           addMore:true,
           clipBoardPaste:true,
           excludeName:null,beforeShow:function(){returntrue},onSelect:function(){},afterShow:function(){},onRemove:function(){},onEmpty:function(){},
				
           captions:{
              button:"Choose Files",
              feedback:"Choose files To Upload",
              feedback2:"files were chosen",
              drop:"Drop file here to Upload",
              removeConfirmation:"Are you sure you want to remove this file?",
					
              errors:{
                 filesLimit:"Only {{fi-limit}} files are allowed to be uploaded.",
                 filesType:"Only Images are allowed to be uploaded.",
                 filesSize: "{{fi-name}} is too large! 
                    Please upload file up to {{fi-maxSize}}MB.",
                 filesSizeAll: "Files you've choosed are too large! 
                    Please upload files up to {{fi-maxSize}}MB."
              }}});});&lt;/script&gt;&lt;style&gt;.file_input{
        display: inline-block;
        padding:10px 16px;
        outline: none;
        cursor: pointer;
			
        text-decoration: none;
        text-align: center;
        white-space: nowrap;
			
        font-family: sans-serif;
        font-size:11px;
        font-weight: bold;
			
        border-radius:3px;
        color: #008BFF;
        border:1px solid #008BFF;
        vertical-align: middle;
        background-color: #fff;
        margin-bottom:10px;
			
        box-shadow:0px 1px 5px rgba(0,0,0,0.05);-webkit-transition: all 0.2s;-moz-transition: all 0.2s;
        transition: all 0.2s;}.file_input:hover,.file_input:active {
        background: #008BFF;
        color: #fff;}&lt;/style&gt;&lt;!--[ifIE]&gt;&lt;script src ="https://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;&lt;![endif]--&gt;&lt;/head&gt;&lt;body&gt;&lt;div&gt;&lt;form action ="./php/upload.php" method ="post"
        enctype ="multipart/form-data"&gt;&lt;!-- filer 1--&gt;&lt;input type ="file" multiple ="multiple" 
              name ="files[]" id ="input1"&gt;&lt;br&gt;&lt;input type ="submit"&gt;&lt;/form&gt;&lt;/div&gt;&lt;br&gt;&lt;hr&gt;&lt;br&gt;&lt;div&gt;&lt;form action ="./php/upload.php" method ="post"
        enctype ="multipart/form-data"&gt;&lt;!-- filer 2--&gt;&lt;a class="file_input" data-jfiler-name ="files"
           data-jfiler-extensions ="jpg, jpeg, png, gif"&gt;&lt;i class="icon-jfi-paperclip"&gt;&lt;/i&gt; 
           Attach a file&lt;/a&gt;&lt;br&gt;&lt;input type ="submit"&gt;&lt;/form&gt;&lt;/div&gt;&lt;br&gt;&lt;hr&gt;&lt;br&gt;&lt;div style ="background: #f7f8fa;padding: 50px;"&gt;&lt;!-- filer 3--&gt;&lt;input type ="file" multiple ="multiple" 
        name ="files[]" id ="input2"&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

More posts