Thumbnail creation is a core feature for file uploaders (especially ones geared towards images). Since most javascript-jquery lightboxes are built for thumbnail galleries, likewise, mainstream uploaders should contain thumbnail creation capabilities. Pre-packaged lightboxes usually include examples with thumbnails that are 75x75 pixels and 3-5 KB. If a fileuploader does not have easily accessible and customizable "server side" thumbnail saving, the uploader is not suitable for mainstream use.
Thumbnail-based Lightboxes
PrettyPhoto
MagnificPopup
Blueimp's Lightbox Image Gallery
Blueimp's Jquery Fileuploader comes with php and node.js server scripts with built-in thumbnail creation. End-users can simply change directory locations by editing a few lines of code.
Blueimp's UploadHandler.php has the following code for unsized image directories:
'upload_dir' => dirname($this->get_server_var('SCRIPT_FILENAME')).'/files/',
'upload_url' => $this->get_full_url().'/files/',
Furthermore, end-users can uncomment two lines to start creating thumbnails in a specified location:
'thumbnail' => array(
// Uncomment the following to use a defined directory for the thumbnails
// instead of a subdirectory based on the version identifier.
// Make sure that this directory doesn't allow execution of files if you
// don't pose any restrictions on the type of uploaded files, e.g. by
// copying the .htaccess file from the files directory for Apache:
//'upload_dir' => dirname($this->get_server_var('SCRIPT_FILENAME')).'/thumb/',
//'upload_url' => $this->get_full_url().'/thumb/',
// Uncomment the following to force the max
// dimensions and e.g. create square thumbnails:
//'crop' => true,
'max_width' => 80,
'max_height' => 80
In node, the options are in one segment at the top of the code:
options = {
tmpDir: __dirname + '/tmp',
publicDir: __dirname + '/public',
uploadDir: __dirname + '/public/files',
uploadUrl: '/files/',
maxPostSize: 11000000000, // 11 GB
minFileSize: 1,
maxFileSize: 10000000000, // 10 GB
acceptFileTypes: /.+/i,
// Files not matched by this regular expression force a download dialog,
// to prevent executing any scripts in the context of the service domain:
inlineFileTypes: /\.(gif|jpe?g|png)$/i,
imageTypes: /\.(gif|jpe?g|png)$/i,
imageVersions: {
'thumbnail': {
width: 80,
height: 80
Please, please, please add the following easily accessible features to the upload scripts:
$unsized_image_dir = 'files/unsized/';
$thumbnail_dir = 'files/thumb/';
$max_width_unsized = $native_image_width; //can be restricted with int value
$max_height_unsized = $native_image_height; //can be restricted with int value
$max_width_thumb = 75;
$max_height_thumb = 75;
$max_file_size_unsized = 10000000000;
$accepted_file_types = array('jpg', 'jpeg', 'jpe', 'gif', 'tiff', 'tif', 'bmp', 'png');
//available values txt, pdf, exe, jpg, etc. etc. etc.
Note: this has nothing to do with client side image previews or re-sizing. I am looking to upload images and then re-size them server side, resulting with two separate images for every image uploaded (a normal size and a thumbnail size). I like large images in which users can click on to enlarge, similar to Imgur. I also need the thumbnails for my image gallery.