Dynamically show images for file types uploaded using ACF FILE field

How To
1

I used ACF to create a Document Library where users can upload their files…
I have used the ACF File field for the uploading

I have aslo created the Single Template for the post, should someone need to download the file and the link and download is working fine…

Now I need some help expaning on my template, as I want to display an image (and if possible the file-size) for the type of file that was added to the library…
For example if a user uploaded a pdf document, I want to show an image of a PDF… and so on…

Most used file types are pdf / doc, docx (Word) / xls, xlsx (Excel) / ppt, pptx (Powerpoint)
rtf, txt (Text) / jpg, png (Images)

1 Like
2

does anyone have a solution for same question, but using Metabox Advanced File field ?

3

the following code wil display type and size for ACF File upload field

<?php
// Custom function to display file information
function display_file_information() {
  // Retrieve the file ID from the ACF File field
  $file = get_field('file_upload');

  if ($file) {
    // Get the file size
    $file_size = size_format(filesize(get_attached_file($file['ID'])));

    // Get the file type
    $file_type = wp_check_filetype($file['url']);

    // Define the file type title
    $file_title = '';

    // Set the file type title based on the file extension
    if ($file_type['ext'] === 'pdf') {
      $file_title = 'PDF<br>Document';
    } elseif ($file_type['ext'] === 'doc' || $file_type['ext'] === 'docx') {
      $file_title = 'Word<br>Document';
    } elseif ($file_type['ext'] === 'xls' || $file_type['ext'] === 'xlsx') {
      $file_title = 'Excel<br>Spreadsheet';
    } elseif ($file_type['ext'] === 'ppt' || $file_type['ext'] === 'pptx') {
      $file_title = 'PowerPoint<br>Presentation';
    } elseif ($file_type['ext'] === 'zip') {
      $file_title = 'ZIP<br>File';
    } else {
      $file_title = 'File';
    }

    // Display the file type image, size, and title in a row
    echo '<div style="display: flex; align-items: center;">';
    // Display the file type image
    if ($file_type['ext'] === 'pdf') {
      // Image for PDF
      echo '<img src="/wp-content/uploads/PDF-doc.png" alt="PDF" style="width: 60px; height: 60px;">';
    } elseif ($file_type['ext'] === 'doc' || $file_type['ext'] === 'docx') {
      // Image for Word documents
      echo '<img src="/wp-content/uploads/word-doc.png" alt="Word Document" style="width: 60px; height: 60px;">';
    } elseif ($file_type['ext'] === 'xls' || $file_type['ext'] === 'xlsx') {
      // Image for Excel documents
      echo '<img src="/wp-content/uploads/Excel-doc.png" alt="Excel Spreadsheet" style="width: 60px; height: 60px;">';
    } elseif ($file_type['ext'] === 'ppt' || $file_type['ext'] === 'pptx') {
      // Image for PowerPoint files
      echo '<img src="/wp-content/uploads/PowerPoint-doc.png" alt="PowerPoint Presentation" style="width: 60px; height: 60px;">';
    } elseif ($file_type['ext'] === 'zip') {
      // Image for ZIP files
      echo '<img src="/wp-content/uploads/ZIP-file.png" alt="ZIP File" style="width: 60px; height: 60px;">';
    } else {
      // Default image for other file types
      echo '<img src="/wp-content/uploads/unknown-file.png" alt="File" style="width: 60px; height: 60px;">';
    }

    // Display the file size and title
    echo '<div style="display: flex; flex-direction: column; margin-left: 10px;">';
    echo '<span style="font-size: 14px;">' . $file_title . '</span>';
    echo '<span style="font-weight: 500;">' . $file_size . '</span>';
    echo '</div>';

    echo '</div>';
  }
}
?>