jQuery plugin inputFileThumb - Documentation

 

HTML


<form method="post" enctype="multipart/form-data">
  <input type="file" name="myfile" />
</form>

JavaScript


$(':file[name=myfile]').inputFileThumb({    
  file                  : 'url',
  title                 : 'Title',
  width                 : 58,
  height                : 58,
  description           : 'More info about the file',
  extensions            : [],
  deleteInput           : false,
  displayExtension      : true,
  orientation           : '',
  classes               : '',
  addTitle              : 'Add',
  editTitle             : 'Edit',
  delTitle              : 'Delete',
  wrongExtensionMessage : 'This extension is not allowed',
  cbCheckExt            : false,
  cbVisualize           : false,
  cbDelete              : null,
  cbChange              : null
});

Definition: the details layer is the layer displayed when the mouse is over the thumbnail.

file:
URL of the existing file (the file which has been uploaded)
title:
The title of the file (appears in the details layer)
width:
Width in pixels of the thumbnail
height:
Height in pixels of the thumbnail
description:
More info about the file (appears in the details layer)
extensions:
Array of allowed extensions for the file
deleteInput:
Give the name of a hidden input if you need one to catch the delete action
displayExtension:
Show the file extension (required or effective) in the thumbnail
orientation:
Orientation of the details layer. Leave blank for automatic detection (layer right of the thumbnail when possible). Set to 'rtl' to force the layer on the left.
classes:
You may create custom classes to change the thumbnail's default style. See CSS below for further details.
addTitle:
Label of the add link
editTitle:
Label of the edit link
delTitle:
Label of the delete link
wrongExtensionMessage:
Message returned when an unsupported file type is selected. Unused when cbCheckExt is a function.
cbCheckExt:
A callback function called when an unsupported file type is selected. This fonction must take two parameters: the wrong extension and the array of allowed extensions
cbVisualize:
A callback function called when the user clicks on the thumbnail. The function's context is the link over the thumbnail.
cbDelete:
A callback function called when the user clicks on the Delete file. The function's context is the instance of InputFileThumb object. The function must return true if you want to continue the delete process.
cbChange:
A callback function called when the input[type=file] change. The function's context is the instance of InputFileThumb object.

 

CSS - Customisation

You may create custom classes to change the thumbnail's default style. See JS above for futher details on how to call your classes.
Use the following selector for your custom classes: span.inputFileThumb .thumb div.myCustomClass
As an example, here is the native class image:


span.inputFileThumb .thumb div.image {
    background-image    : url(images/apn.png);
}

You may also change the colours associated to each extension (only shows when a file is selected). To set the colour for a specific extension, use the following selector: span.inputFileThumb .thumb div.on span.yourExtension
Here is an example for GIF:


span.inputFileThumb .thumb div.on span.gif {
    background-color    : #107c40;
}