Skip to content

Instantly share code, notes, and snippets.

@rafaehlers
Created May 15, 2025 19:25
Show Gist options
  • Save rafaehlers/79bec90b826338794a74cc248f64f71c to your computer and use it in GitHub Desktop.
Save rafaehlers/79bec90b826338794a74cc248f64f71c to your computer and use it in GitHub Desktop.
Replace File-Upload output with an icon that matches the file type.
<?php // DO NOT COPY THIS LINE
/**
* Replace File-Upload output with an icon that matches the file type.
*
* @see https://github.com/GravityKit/GravityView/blob/a6584d8a/includes/fields/class-gravityview-field-fileupload.php#L455
* @filter gravityview/fields/fileupload/files_array
*
* @param array $output_arr Array of files, one item per uploaded file.
* @return array Modified array with icon-only output.
*/
add_filter( 'gform_secure_file_download_location', '__return_false' ); // Filter necessary to output the full URL of uploaded files
add_filter( 'gravityview/fields/fileupload/files_array', 'gv_iconify_fileupload_output', 10 );
function gv_iconify_fileupload_output( $output_arr ) {
// Map extensions ⇒ Dashicon classes.
$icon_map = array(
// Images
'png' => 'dashicons-format-image',
'jpg' => 'dashicons-format-image',
'jpeg' => 'dashicons-format-image',
'gif' => 'dashicons-format-image',
'webp' => 'dashicons-format-image',
'svg' => 'dashicons-format-image',
// Documents
'pdf' => 'dashicons-media-document',
'doc' => 'dashicons-media-text',
'docx' => 'dashicons-media-text',
'rtf' => 'dashicons-media-text',
// Spreadsheets
'xls' => 'dashicons-media-spreadsheet',
'xlsx' => 'dashicons-media-spreadsheet',
'csv' => 'dashicons-media-spreadsheet',
// Archives
'zip' => 'dashicons-archive',
'rar' => 'dashicons-archive',
);
foreach ( $output_arr as $key => $file ) {
$url = $file['file_path'];
$ext = strtolower( pathinfo( $url, PATHINFO_EXTENSION ) );
$icon = isset( $icon_map[ $ext ] ) ? $icon_map[ $ext ] : 'dashicons-media-default';
// Build the HTML the View will render.
$output_arr[ $key ]['content'] = sprintf(
'<a href="%1$s" class="gv-file-icon-link" target="_blank" rel="noopener noreferrer"><span class="dashicons %2$s"></span></a>',
esc_url( $url ),
esc_attr( $icon )
);
}
return $output_arr;
}
/**
* Make sure Dashicons are available on the front-end (they already are in admin).
*/
add_action( 'wp_enqueue_scripts', function () {
wp_enqueue_style( 'dashicons' );
} );
@rafaehlers
Copy link
Author

Where to put this code

Read here on where to put code snippets: https://docs.gravitykit.com/article/210-where-to-put-code-samples

Styling (optional)

.gv-field-file-uploads{
	margin: 0 !important;
	padding: 0 !important;
}

.gv-file-icon-link .dashicons {
	/*font-size: 28px;       /* Bigger icon */
	line-height: 1;        /* Remove extra space */
	vertical-align: middle;
}

.gv-file-icon-link:hover .dashicons {
	opacity: 0.7;          /* Simple hover feedback */
}

/* Remove underline from the icon links */
.gv-file-icon-link {
	text-decoration: none !important;     /* no underline */
}

/* Keep it from coming back on hover/focus */
.gv-file-icon-link:hover,
.gv-file-icon-link:focus {
	text-decoration: none !important;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment