Iptanus File Upload Viewer – Search Filter

The Professional version of Iptanus File Upload has a front-end file viewer, which shows visitors a list of uploaded files that you configure. It can paginate that list, offer downloads and deletions, and delete several files at once.

Users asked for one thing more: a search filter, to narrow the list as you type. This article shows how to add one.

What it looks like

The filter sits above the file viewer. Depending on how you set it up, it narrows the list from free text typed into a box, or from a value chosen in a drop-down.

Adding the code

Put the following JavaScript into the page holding the file viewer shortcode — the one that looks like [wordpress_file_upload_browser ...] — immediately below it:

<script type="text/javascript">
wfu_create_browser_filter=function(e,r,t,l,o,a,n,f,i,s){if(!GlobalData)return void console.log("Could not create search filter. Iptanus File Upload plugin has not been initialized on page.");if("undefined"==typeof e)e=1;if(!GlobalData.WFUB)return void console.log("Could not create search filter. There is no file viewer on page.");if(!GlobalData.WFUB[e]||!document.querySelector("table.wfu_browser_table.wfu_browser-"+e))return void console.log("Could not create search filter. There is no file viewer with ID: "+e+" or has not been initialized correctly.");if(!document.querySelector("div.wfu_browser_header.wfu_browser-"+e))return void console.log("Could not create search filter. The file viewer does not have a header bar.");var u=GlobalData.WFUB[e],d=!(!u.reload_on_update||!u.paginated);if("undefined"==typeof r)r=[1];else if("number"==typeof r)r=[r];var _=r.length;if("object"!=typeof t||t.length!=_){var p=document.querySelectorAll(".wfu_browser-"+e+"_columns");t=[];for(var w=0;w<_;w++)t[w]="Filter "+p[r[w]-1].value}if("undefined"==typeof l)l=Array.apply(null,Array(_)).map(String.prototype.valueOf,"freetext");else if("string"==typeof l)l=Array.apply(null,Array(_)).map(String.prototype.valueOf,l);else if(l.length!=_)l=Array.apply(null,Array(_)).map(String.prototype.valueOf,"freetext");if("undefined"==typeof o)o=Array.apply(null,Array(_)).map(Boolean.prototype.valueOf,true);else if("boolean"==typeof o)o=Array.apply(null,Array(_)).map(Boolean.prototype.valueOf,o);else if(o.length!=_)o=Array.apply(null,Array(_)).map(Boolean.prototype.valueOf,true);if("undefined"==typeof a||d)a=false;if("undefined"==typeof n||n.length!=_){n=[];for(var w=0;w<_;w++)n[w]="freetext"==l[w]?null:d?[]:["auto"]}if("undefined"==typeof f)f=Array.apply(null,Array(_)).map(String.prototype.valueOf,"wildcard");else if("string"==typeof f)f=Array.apply(null,Array(_)).map(String.prototype.valueOf,f);else if(f.length!=_)f=Array.apply(null,Array(_)).map(String.prototype.valueOf,"wildcard");if("undefined"==typeof i)i=true;if("undefined"==typeof s)s={};if(!s.apply)s.apply="apply filter";if(!s.reset)s.reset="reset filter";wfu_addCSSRule=function(e,r,t,l){if("insertRule"in e)e.insertRule(r+"{"+t+"}",l);else if("addRule"in e)e.addRule(r,t,l)};for(var w=0;w<_;w++)if(o[w])wfu_addCSSRule(document.styleSheets[0],".wfu_col-"+r[w]+".wfu_browser-"+e,"display: none",0);wfu_add_search_filter_to_browser=function(e,r,t,l,o,a,n,f,i,s,u){wfu_browser_filter_changed=function(e){wfu_browser_search_filters_changed(e)},wfu_browser_clear_filter=function(e){for(var t=r.length,l=0;l<t;l++){var o=document.getElementById("wfu_browser_"+e+"_filter_"+l);if(!o)return;var a=o.filter_props.field_type;if("freetext"==a)document.getElementById("wfu_browser_"+e+"_filter_"+l).value="";else if("dropdown"==a)document.getElementById("wfu_browser_"+e+"_filter_"+l).selectedIndex=-1;o.filter_props.reset=true}wfu_browser_filter_changed(e)},wfu_browser_add_filter_form=function(e,r,t,l,o,a,n,f,i,s){var u=document.querySelector("table.wfu_browser_table.wfu_browser-"+e),d=document.querySelector("div.wfu_browser_header.wfu_browser-"+e);if(!u||!d)return;var _=document.getElementById("wfu_browsernav_"+e+"_pages"),p=_?_.parentNode:null,w=document.querySelectorAll(".wfu_browser-"+e+"_columns"),c=document.createElement("DIV");c.style.float="left";for(var y=r.length,v='<input id="wfu_browser_'+e+'_filter" type="hidden" value="'+y+'" />',h=0;h<y;h++){var b=w[r[h]-1].value;if(v+="n<label>"+t[h]+"</label>","freetext"==l[h])v+='n<input id="wfu_browser_'+e+"_filter_"+h+'" type="text" style="margin-left:6px;" />';else if("dropdown"==l[h]){v+='n<select id="wfu_browser_'+e+"_filter_"+h+'" style="margin-left:6px;">';var g=[];if(1!=a[h].length||"auto"!=a[h][0])for(var m=0;m<a[h].length;m++)g.push(a[h][m]);else{for(var A=wfu_get_browser_fileprops(e),m=0;m<A.length;m++){var x=A[m][b];if(-1==g.indexOf(x))g.push(x)}g.sort()}for(var m=0;m<g.length;m++)v+='n	<option value="'+g[m]+'">'+g[m]+"</option>";v+="n</select>"}}if(!o)v+='n<button title="'+i.apply+'" onclick="wfu_browser_filter_changed('+e+');" style="vertical-align:middle;"><svg viewBox="0 0 16 16" style="width:0.6em; height:0.6em;"><title>checkmark</title><path class="path1" d="M13.5 2l-7.5 7.5-3.5-3.5-2.5 2.5 6 6 10-10z"></path></svg></button>';v+='n<button title="'+i.reset+'" onclick="wfu_browser_clear_filter('+e+');" style="vertical-align:middle;"><svg viewBox="0 0 16 16" style="width:0.6em; height:0.6em;"><title>cross</title><path class="path1" d="M16 13l-5-5 5-5-3-3-5 5-5-5-3 3 5 5-5 5 3 3 5-5 5 5 3-3z"></path></svg></button>',c.innerHTML=v,d.insertBefore(c,p);var B=document.getElementById("wfu_browser_"+e+"_filter");B.props={case_sensitive:f,server_side:s};for(var h=0;h<y;h++){var b=w[r[h]-1].value,S=document.getElementById("wfu_browser_"+e+"_filter_"+h);if(S.filter_props={reset:false,colname:b,field_type:l[h],match_mode:n[h]},"dropdown"==l[h])S.selectedIndex=-1;if(o){if("freetext"==l[h])var I=["textInput","input","change","keypress","paste"];else if("dropdown"==l[h])var I=["change"];for(var m=0;m<I.length;m++)wfu_addEventHandler(S,I[m],function(){wfu_browser_filter_changed(e)})}}}(e,r,t,l,a,n,f,i,s,u),wfu_filter_fileprops=function(e,r){for(var t=document.getElementById("wfu_browser_"+e+"_filter"),l=t.value,o=t.props.case_sensitive,a=t.props.server_side,n=[],f=0;f<l;f++){var i=document.getElementById("wfu_browser_"+e+"_filter_"+f);if(!(""==i.value||i.filter_props.reset))n.push({colname:i.filter_props.colname,value:i.value,mode:i.filter_props.match_mode});i.filter_props.reset=false}if(a){var s={case_sensitive:o,server_side:a,colfilters:n};return s}else{for(var u=0,f=0;f<r.length;f++){for(var d=true,_=0;_<n.length;_++){var p=n[_].value,w=r[f][n[_].colname];if(!o)p=p.toLowerCase(),w=w.toLowerCase();var c;if("strict"==n[_].mode)c=w!=p;else if("loose"==n[_].mode)c=w.toLowerCase().indexOf(p.toLowerCase())<0;else if("fuzzy"==n[_].mode)c=w.toLowerCase().indexOf(p.toLowerCase())<0;else c=!("*"!=p.substr(0,1)||"*"!=p.substr(p.length-1,1)||w.indexOf(p.substr(1,p.length-2))>=0)||!("*"!=p.substr(0,1)||"*"==p.substr(p.length-1,1)||p.substr(1)==w.substr(w.length-p.length+1,p.length-1))||!("*"==p.substr(0,1)||"*"!=p.substr(p.length-1,1)||p.substr(0,p.length-1)==w.substr(0,p.length-1))||!("*"==p.substr(0,1)||"*"==p.substr(p.length-1,1)||p==w);if(c){d=false;break}}if(r[f].included=d,r[f].included)u++}return r}};var d={domain:u?"server-side":"client-side",apply_filter:function(e){return wfu_filter_fileprops(this.browser_id,e)}};wfu_browser_register_search_filter(e,d)},wfu_addEventHandler(window,"load",function(){wfu_add_search_filter_to_browser(e,r,t,l,o,a,n,f,i,s,d)})};
wfu_create_browser_filter(bid, filtered_columns, labels, field_types, hide_columns, immediate, dropdown_lists, match_modes, case_sensitive, caption_list);
</script>

The parameters

Before you save the page, replace the parameters shown in blue with the values you want. Each of them is described below.

Parameter	Type	Description
bid	integer (optional)	Browser ID. If omitted it will be 1.
filtered_columns	integer or array (optional)	The columns the filter applies to; there can be more than one. Each column named gets its own search field above the file viewer. Columns are numbered from left to right starting at 1. For a single column, give a plain number, e.g. 1; for several, an array, e.g. [1, 3, 4]. If omitted, the first column is used.
labels	array (optional)	The label for each search field. It must be an array having as many items as the number of filtered columns, e.g. [“Name”, “User”]. If omitted, then the label for each search field will be the column name preceded by “Filter”, e.g. for column “file” it will be “Filter file”.
field_types	string or array (optional)	The type of the search fields. It can be “freetext” if you want to filter based on free text, or “dropdown” if you want to filter based on a dropdown list. If only one value is defined as a string, e.g. “freetext”, then all search fields will be of this type. Otherwise, every search field can have its own type by defining an array, e.g. [“freetext”, “dropdown”]. If omitted then all search fields will be “freetext”.
hide_columns	boolean or array (optional)	Defines whether the filtered columns will be hidden. If only one value is defined as a boolean, e.g. true, then all filtered columns will have this state. Otherwise every column can have its own state by defining an array, e.g. [true, false]. If omitted, all filtered columns will be hidden.
immediate	boolean (optional)	Defines whether filtering is applied immediately after typing in the search box (or selecting a value from the dropdown list), or it is applied after pressing the apply button. The default value is false.
dropdown_lists	array (optional)	Defines the values of the dropdown lists for search fields of “dropdown” type. The lists can be manually defined, in the form [“value1”, “value2”, …] or can be populated automatically with the values of the filtered columns if they are set to [“auto”]. This parameter must be an array with as many items as the number of search fields. For instance, if the first search field is freetext and the second is dropdown it should look like this: [null, [“value1”, “value2”, “value3”]]. If omitted, all dropdown search fields will be populated automatically.
match_modes	array (optional)	Defines how the search filter values will be matched with the filtered column’s values. There are three modes: 1) “strict”: only identical values to the filter will be matched, 2) “wildcard”: a wildcard symbol (*) at the end of search filter value denotes that all column values starting with the filter will be matched, a wildcard symbol (*) at the beginning of search filter value denotes that all column values ending with the filter will be matched, wildcard symbols (*) at the beginning and end of search filter value denotes that all column values containing the filter will be matched, no wildcard symbol at all behaves as strict mode, 3) “fuzzy” or “loose”:  all column values containing the search filter value will be matched (same as using wildcard mode and having wildcards at beginning and end of the filter value). If only one value is defined as a string, e.g. “strict”, then all search fields will be of this mode. Otherwise, every search field can have its own mode by defining an array, e.g. [“fuzzy”, “strict”]. If omitted, “wildcard” mode will be used.
case_sensitive	boolean (optional)	Whether matching is case-sensitive. It is case-sensitive if omitted.
caption_list	object (optional)	The filter has two buttons, one to apply what has been typed or chosen and one to reset it. They read “apply filter” and “reset filter” by default. To change one, give {apply: “my apply title”} or {reset: “my reset title”}; to change both, {apply: “my apply title”, reset: “my reset title”}.

An example

Suppose you want to narrow the list by the User column, choosing the user from a drop-down:

wfu_create_browser_filter(1, [6], "Select User", ["dropdown"], false);

The file viewer then looks like this:

Choose a user from the drop-down and the list narrows to that user’s files.

For more about search filters, please contact us.

The Iptanus team