Output a custom image icon for every uploaded file type in GravityView.

gv_custom_icon_for_file_type.php

<?php // DO NOT COPY THIS LINE

/**
 * Output a custom image icon for every uploaded file type in GravityView.
 *
 * @filter gravityview/fields/fileupload/files_array
 *
 * @param array $output_arr Array of uploaded files passed by GravityView.
 * @return array Modified array with icon-image 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_custom_icon_for_file_type', 10 );
function gv_custom_icon_for_file_type( $output_arr ) {

	// 1️⃣  Map extension → icon URL.  Change paths to your own icons.
	$icon_map = array(
		// Images
		'png'  => get_stylesheet_directory_uri() . '/assets/icons/png.svg',
		'jpg'  => get_stylesheet_directory_uri() . '/assets/icons/jpg.svg',
		'jpeg' => get_stylesheet_directory_uri() . '/assets/icons/jpg.svg',
		'gif'  => get_stylesheet_directory_uri() . '/assets/icons/gif.svg',
		'webp' => get_stylesheet_directory_uri() . '/assets/icons/img.svg',

		// Documents
		'pdf'  => get_stylesheet_directory_uri() . '/assets/icons/pdf.svg',
		'doc'  => get_stylesheet_directory_uri() . '/assets/icons/doc.svg',
		'docx' => get_stylesheet_directory_uri() . '/assets/icons/doc.svg',

		// Spreadsheets
		'xls'  => get_stylesheet_directory_uri() . '/assets/icons/xls.svg',
		'xlsx' => get_stylesheet_directory_uri() . '/assets/icons/xls.svg',
		'csv'  => get_stylesheet_directory_uri() . '/assets/icons/xls.svg',

		// Archives
		'zip'  => get_stylesheet_directory_uri() . '/assets/icons/zip.svg',
		'rar'  => get_stylesheet_directory_uri() . '/assets/icons/zip.svg',
	);

	// Generic fallback icon if the extension isn't mapped above.
	$default_icon = get_stylesheet_directory_uri() . '/assets/icons/file.svg';

	foreach ( $output_arr as $key => $file ) {

		$url = $file['file_path'];
		$ext = strtolower( pathinfo( $url, PATHINFO_EXTENSION ) );

		$icon_url = isset( $icon_map[ $ext ] ) ? $icon_map[ $ext ] : $default_icon;

		// 2️⃣  Swap the rendered content for our icon-link HTML.
		$output_arr[ $key ]['content'] = sprintf(
			'<a href="%1$s" class="gv-file-icon-link" target="_blank" rel="noopener noreferrer">
				<img src="%2$s" alt="%3$s icon" class="gv-file-icon" />
			</a>',
			esc_url( $url ),
			esc_url( $icon_url ),
			esc_attr( strtoupper( $ext ) )
		);
	}

	return $output_arr;
}

How to use this snippet

Place your icon files in your-theme/assets/icons/ (or anywhere you like).
SVGs scale crisply, but PNG/WebP works too.

Update $icon_map paths to match the actual file names/locations.
You can also point to remote URLs if you prefer.

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

Now each file upload—whether it’s a single file or many—will show your custom icon, linked to the file itself.

CSS (optional but recommended)

/* Make the icons a consistent size and remove link underline */
.gv-file-icon-link {
	text-decoration: none;          /* no underline */
}

.gv-file-icon {
	width: 28px;                    /* pick a size */
	height: auto;
	vertical-align: middle;
	transition: opacity .2s;
}

.gv-file-icon-link:hover .gv-file-icon,
.gv-file-icon-link:focus .gv-file-icon {
	opacity: .75;                   /* simple hover feedback */
}