Skip Navigation

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

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

Problem: Preview/screenshot of uploaded file on front-end.

Solution: 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: https://toolset.com/forums/topic/preview-screenshot-of-uploaded-file-on-front-end/#post-919826

Relevant Documentation:

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.

This topic contains 1 reply, has 2 voices.

Last updated by Minesh 2 years, 11 months ago.

Assigned support staff: Minesh.

Author
Posts
#919525
screenshotpreview.JPG

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.

Thanks!

Guido

#919826

Minesh
Supporter

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"]

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