The professional version of WordPress File Upload plugin includes a front-end file viewer, from where users can view a customized list of the uploaded files.
The file viewer can display the files in a paginated format and it can also perform specific actions, such as download and delete. Deletion of many files at once (bulk deletion) is also supported.
After many users’ requests, another feature has also been added to the file viewer, search filter, which can be used to narrow the list of displayed files dynamically.
This article will show you how to create a search filter for your file viewer, which will show up above the file viewer and will allow the user to filter dynamically the list of files based on free text entered in a text box, or a value selected from a dropdown list.
To make the search filter work, you need to put the following Javascript code in the page where you have the file viewer shortcode (the one that looks like [wordpress_file_upload_browser …]), right below the shortcode:
<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. WordPress 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>
Before you update the page, you need to replace the parameters in blue with preferred values, in order to customize the search filter. Here is a description of these parameters:
Parameter | Type | Description |
---|---|---|
bid | integer (optional) | Browser ID. If omitted it will be 1. |
filtered_columns | integer or array (optional) | The columns where the filter will be applied. More than one columns can be defined. For every column defined the search filter will create a search field above the file viewer. Columns are numbered from left to right starting from 1. If only one column is defined, it can be a plain number, e.g. 1. If more than one columns are defined, it must be an array, like this: [1, 3, 4]. If omitted then the first column will be assumed. |
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 symbols is the same 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) | Defines whether filtering will be case sensitive or not. If omitted it will be case sensitive. |
caption_list | object (optional) |
The search filter has 2 buttons, one to apply the typed/selected filter and one to reset it. The title of the apply button is “apply filter” and of the reset button is “reset filter”. If you want to change the title of the apply button, then caption_list will be {apply: “my apply title”}. If you want to change the title of the reset button, then caption_list will be {reset: “my reset title”}. If you want to change both, it will be {apply: “my apply title”, reset: “my reset title”}. |
Here is an example where we want to narrow the file list of a file viewer based on User column by selecting the user from a dropdown list:
wfu_create_browser_filter(1, [6], "Select User", ["dropdown"], false);
The file viewer, after defining this search filter, will look like this:
When you select a value from the dropdown list of available users the User column will display only the files of that user.
For more information about the search filters, you can contact Iptanus.
where exacly should i add this..i have added below shortcode..but it shows html code in main page
Thanks for this amazing plugin! I would just like to confirm if it is possible to filter out additional user fields within the file viewer?
Greetings