Suppose that you want your visitors to upload files to your website and you want them to be able to view and download these files.
This artile describes how can we create a simple front-end file browser to display the files that we have uploaded using WordPress File Upload plugin.
The file browser will be created below the plugin like this:
To do the above we need to install Code Snippets, a 3rd party plugin to assist us implement some filters and actions of WordPress File Upload plugin and also assign to the plugin specific settings. Here are the steps:
1. Install Code Snippets
2. Go to your Dashboard, in Snippets Tab and create a new code snippet.
3. Give it a name, whatever you like. Paste the following code inside Code textbox of your snippet.
if (!function_exists('wfu_before_file_upload_handler')) {
function wfu_before_file_upload_handler($file_path, $file_unique_id) {
$_SESSION['wfu_tempfiles'][$file_unique_id] = $file_path;
return $file_path;
}
add_filter('wfu_before_file_upload', 'wfu_before_file_upload_handler', 10, 2);
}
if (!function_exists('wfu_after_file_upload_handler')) {
function wfu_after_file_upload_handler($file_unique_id, $upload_result, $error_message, $error_admin_messages) {
if (isset($_SESSION['wfu_tempfiles'][$file_unique_id]) && $_SESSION['wfu_tempfiles'][$file_unique_id] != '')
$_SESSION['wfu_uploadedfiles'][$file_unique_id] = array('path' => $_SESSION['wfu_tempfiles'][$file_unique_id], 'time' => time() );
}
add_action('wfu_after_file_upload', 'wfu_after_file_upload_handler', 10, 4);
}
if (!function_exists('custom_gallery_output')) {
function custom_gallery_output($output, $atts, $instance) {
if ( isset($atts['override']) && $atts['override'] == 'true' ) {
$showempty = false;
$file_items = array();
$time_items = array();
foreach ($_SESSION['wfu_uploadedfiles'] as $item) {
if ( file_exists($item['path']) ) {
$key = array_search($item['path'], $file_items);
if ( $key === false ) {
array_push($file_items, $item['path']);
array_push($time_items, $item['time']);
}
elseif ( $item['time'] > $time_items[$key] ) {
$file_items[$key] = $item['path'];
$time_items[$key] = $item['time'];
}
}
}
if ( count($file_items) == 0 && !$showempty ) return "<div></div>";
$output = '<div class="wfu_file_list">';
$output .= "\n\t".'<label>Your uploaded files</label>';
$output .= "\n\t".'<table>';
$output .= "\n\t\t".'<thead>';
$output .= "\n\t\t\t".'<tr>';
$output .= "\n\t\t\t\t".'<th>#</th>';
$output .= "\n\t\t\t\t".'<th>File</th>';
$output .= "\n\t\t\t\t".'<th>Date</th>';
$output .= "\n\t\t\t".'</tr>';
$output .= "\n\t\t".'</thead>';
$output .= "\n\t\t".'<tbody>';
if ( count($file_items) == 0 ) {
$output .= "\n\t\t\t".'<tr>';
$output .= "\n\t\t\t\t".'<td colspan="3">No files uploaded yet</td>';
$output .= "\n\t\t\t".'</tr>';
}
else {
$i = 0;
foreach ($file_items as $key => $item) {
$i++;
$output .= "\n\t\t\t".'<tr>';
$output .= "\n\t\t\t\t".'<td>'.$i.'</td>';
$output .= "\n\t\t\t\t".'<td><a href="'.site_url().'/'.substr($item, strlen(ABSPATH)).'">'.wfu_basename($item).'</a></td>';
$output .= "\n\t\t\t\t".'<td>'.date('d/m/Y G:i:s', $time_items[$key]).'</td>';
$output .= "\n\t\t\t".'</tr>';
}
}
$output .= "\n\t\t".'</tbody>';
$output .= "\n\t".'</table>';
$output .= '</div>';
return $output;
}
else return '';
}
add_filter('post_gallery', 'custom_gallery_output', 10, 3);
}
4. Leave all other options are they are and press “Save Changes and Activate”. It should look like this:
5. In WordPress File Upload plugin and using the Shortcode Composer go to Interoperability Tab and enable “Attach Uploaded Files To Post” and “Show Image Gallery Below Plugin”. In addition set the text override=”true” in “Image Gallery Options” (this is very important). Also enable redirection and set redirect link to be the page itself. Alternatively, you can just add the following code inside your shortcode: postlink=”true” gallery=”true” galleryoptions=”override=%dq%true%dq%” redirect=”true” redirectlink=”{put here your page}“.
6. We are ready to go. When a visitor opens the page he will only see the plugin. If he uploads a file (or many), the page will refresh after the upload and a file list with all files uploaded will show up below the plugin. The user will be able to download the files he uploaded.
Please note that every user will see only his own files. The list of files is stored in session variables. This is a temporary space that is unique for every visitor. When the user closes its browser and cookies expire, then he will not be able to see his files anymore (which is reasonable because he is not logged in).
The above procedure is only a small example of the power of filters and actions of WordPress File Upload plugin. A new version of the plugin is on its way that will include front-end and back-end browsers not only for visitors and the administrator but for all type of users.
For any questions or asiistance please contact the Iptanus team.