Upload a PDF and Create Thumbnail Image in PHP

22nd May 2011

If you want to be able to upload .pdf files to your website and display an image thumbnail of the first page instead of a text link, this should cover the basics of how to achieve just that.

You will require Ghostscript and ImageMagick to be installed on your server - most linux hosting packages already have these installed.

Create a Simple Upload Form

First we need a simple upload for to upload our pdf document:

<form method="post" action="" enctype="multipart/form-data">
	<input type="file" name="pdf" />
	<input type="submit" name="submit" value="Upload" />
</form>

Target Directories

Create a folder to store your uploaded pdf file and name it "pdf". Now create a folder to store your thumbnail image and name it "pdfimage". Once we have the directories, we can set the paths to them in our PHP:

$pdfDirectory = "pdf/";
$thumbDirectory = "pdfimage/";

Next we need to format the file name of the uploaded file:

//get the name of the file
$filename = basename( $_FILES['pdf']['name'], ".pdf");

//remove all characters from the file name other than letters, numbers, hyphens and underscores
$filename = preg_replace("/[^A-Za-z0-9_-]/", "", $filename).".pdf";

//name the thumbnail image the same as the pdf file
$thumb = basename($filename, ".pdf");

The Fun Part

Now we put the .pdf file in to the "pdf" folder and set the variables for the two files. We also execute imageMagick's "convert" to convert the first page of the pdf to a jpg. The pages are an array so we use {$pdfWithPath}[0] for the first page ({$pdfWithPath}[1] would be page 2 and so on...). We set the color space to RGB and by setting the geometry to '200' we are setting the thumbnail to be 200px wide and the height will be proportionally set automatically. And finally, to see your handy work, we echo out the image and link it to the .pdf file:

if(move_uploaded_file($_FILES['pdf']['tmp_name'], $pdfDirectory.$filename)) {

//the path to the PDF file
$pdfWithPath = $pdfDirectory.$filename;

//add the desired extension to the thumbnail
$thumb = $thumb.".jpg";

//execute imageMagick's 'convert', setting the color space to RGB and size to 200px wide
exec("convert \"{$pdfWithPath}[0]\" -colorspace RGB -geometry 200 $thumbDirectory$thumb");
    
//show the image
echo "<p><a href=\"$pdfWithPath\"><img src=\"pdfimage/$thumb\" alt=\"\" /></a></p>";
}

Try It Out - Full Code

Wrap the whole thing in an if() statement to check whether or not the form has been submitted and we can put it all on one page and test it out:

<?php

if (isset($_POST['submit'])){

$pdfDirectory = "pdf/";
$thumbDirectory = "pdfimage/";

//get the name of the file
$filename = basename( $_FILES['pdf']['name'], ".pdf");

//remove all characters from the file name other than letters, numbers, hyphens and underscores
$filename = preg_replace("/[^A-Za-z0-9_-]/", "", $filename).".pdf";

//name the thumbnail image the same as the pdf file
$thumb = basename($filename, ".pdf");

	if(move_uploaded_file($_FILES['pdf']['tmp_name'], $pdfDirectory.$filename)) {
	
 	//the path to the PDF file
    $pdfWithPath = $pdfDirectory.$filename;
    
    //add the desired extension to the thumbnail
    $thumb = $thumb.".jpg";
    
	//execute imageMagick's 'convert', setting the color space to RGB and size to 200px wide
	exec("convert \"{$pdfWithPath}[0]\" -colorspace RGB -geometry 200 $thumbDirectory$thumb");
	    
	//show the image
	echo "<p><a href=\"$pdfWithPath\"><img src=\"pdfimage/$thumb\" alt=\"\" /></a></p>";
	}
}

?>

<form method="post" action="" enctype="multipart/form-data">
	<input type="file" name="pdf" />
	<input type="submit" name="submit" value="Upload" />
</form>

NOTE: It is not recommended that you use this for site visitors to execute without first adding some security, file-type checking etc... This is a barebones example which is safe to use yourself, but as with all upload scripts, you have to plan for attempted hacking and exploits. Also, you may want to think about unique file naming to avoid overwriting files of the same name.

For security reasons, I have not included a live demo.