Skip Navigation

[Resolved] Preview/screenshot of uploaded file on front-end.

This thread is resolved. Here is a description of the problem and solution.

Preview/screenshot of uploaded file on front-end.

In order to display the preview of uploaded PDF, Doc file you need to add custom shortcode.

You can find proposed solution, in this case, with the following reply:

Relevant Documentation:

This support ticket is created 5 years, 11 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Kolkata (GMT+05:30)

This topic contains 1 reply, has 2 voices.

Last updated by Minesh 5 years, 11 months ago.

Assisted by: Minesh.


Tell us what you are trying to do?
People can make an ad on the front-end of my website with a form. They also have the possibility to upload files. Can be an image or a file like pdf, word, excel etc.

If a visitor watches that ad i want them to see a preview/screenshot of the uploaded file. And if they click on it it opens bigger or download the file.

Is there a similar example that we can see?
In the back-end of an custom post you can see all the toolset custom fields if you make an new custom post. If you upload the files there you will see the link and under it you see the preview/screenshot. That's what i want on the front-end. But without showing the link. Just the preview/screenshot.

Also when i uploaded the screenshot here you see a preview of the image. Something like that but then on the front-end after the ad was submitted.

I added also a screenshot of the back-end.





Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Hello. Thank you for contacting the Toolset support.

Well - there is no such feature exists to display the preview of uploaded PDF file or any file.

However, I've some custom code to suggest and try out. Please try to add following code to your current theme's functions.php file:

add_shortcode( 'generate-file-preview','generate_file_preview');
function generate_file_preview($atts){ 
 global $post;
 $preview_img = '';
  $atts = shortcode_atts(
    'size' => 'medium',
    'field' => null
  , $atts );
    if ( isset( $atts['field'] ) ) {
     $size = $atts['size'];
    $field = get_post_meta( $post->ID,'wpcf-'.$atts['field'], true );
    if ( $field ) {
      $attachment_id = attachment_url_to_postid( $field );
      $attachment_metadata = wp_get_attachment_metadata( $attachment_id );
      if ( isset( $attachment_metadata ) ) {
        $preview_img = $attachment_metadata['sizes'][$size]['file'];
    return $preview_img;

Call the shortcode as:

[generate-file-preview  size="medium" field="field-name"]

- Repalce "field-name" with your original field name.

This ticket is now closed. If you're a Toolset client and need related help, please open a new support ticket.