jQuery plugin inputFileThumb

With inputFileThumb from Novius Labs, replace the boring default file input with a much nicer and user-friendlier version.

  • Current version: 1.0.4
  • License: MIT or GPL






  • Fix: Adding support for uppercases in extensions...


  • Fix: "Delete file" link doesn't work in IE & Opera


  • New: 2 callback functions:
    • cbDelete : called when the user clicks on the Delete file
    • cbChange : called when the input[type=file] changes


  • Fix: bug when the input is hidden on page load (size of the thumb)





Contributions, bug reports

  • Please use github for all contributions.


Plugin page's presentation from bassistance.de. Keep up the good work!


  • Comment by Julian Esperat
    Tuesday 25 October 2011 18:20

    The image preview feature available when passing the options.url parameter could also be native when dealing with local files (not yet uploaded) and when the FileReader API is available.

    A incomplete Proof-Of-Concept is available here :

    When choosing the file to upload, the preview of the local file is displayed. It needs some refactoring to be DRY (Don't Repeat Yourself) and for the preview image to be resized accordingly, but we can see it works.

    It would be nice to make this native! ;) I'll do a pull request if I find some time to finish this.
  • Comment by Antoine Lefeuvre
    Wednesday 5 October 2011 11:58
    inputFileThumb is now on Novius' github http://github.com/novius/inputFileThumb/. Please use it for all contributions, comments, etc.
  • Comment by Gilles
    Wednesday 28 September 2011 18:08
    I forgot to tell you : I updated your jsfiddle with the new callback

    Thanks for your comments
  • Comment by Gilles
    Wednesday 28 September 2011 18:02


    I just updated the plugin with two new callback functions :
    * cbDelete : when the user clicks on the "Delete file" text. The function's context is the instance of InputFileThumb object. The function must return true if you want to continue the delete process.
    * cbChange : when the input[type=file] change. The function's context is the instance of InputFileThumb object.

    I hope that this will help you to do what you want.
  • Comment by BaC
    Wednesday 28 September 2011 05:38
    Try this update instead to see desired functionality: uncomment ugly hack.
  • Comment by Ben
    Tuesday 27 September 2011 22:44
    Salut Antoine and Gilles.

    Thank you kindly for the response.

    I managed to solve my original question - see the JSFiddle link below for a demo. When a file is selected from the HD, I can now populate .fileTitle and .fileInfo with file name and file size of the file (to be uploaded) which works well (ready for some client side validation :)

    My only issue now is capturing the "Delete file" click event to clear the .fileTitle and .fileInfo spans. I tried binding a .live click and .live change on deleteInput and span.deleteFile respectively but this doesn't want to work.

    This is probably very easy, but driving me nuts! If you could help with this that would be great.


    Je vous adresse mes plus vifs remerciements.
  • Comment by Antoine Lefeuvre
    Monday 26 September 2011 11:18
    Salut Ben,

    many thanks for your message. We're glad you like our plugin.

    Just to make sure we got you right: you refer to files which have been uploaded, i.e. located on the server, don't you?
    In this case, we recommend you use the title or description parameters, like here http://jsfiddle.net/XGGpb/58/

    But, if you refer to files to be uploaded (that is, which are only on the user HD), it is way more complicated because of cross-browser compatibility issues. Nevertheless if it is really what you need, we could have a further look into it.

    Antoine and Gilles from Novius Labs
  • Comment by BaC
    Friday 23 September 2011 19:59
    inputFileThumb = Cool plugin.

    I cant seem to be able to display the file url or filename of the uploaded file in the onHover pop.

    I assumed this would be the URL option. Displaying the file name or last part of the upload path will certainly help users when dealing with multiple file uploads...

    Have i missed anything?

    Keep up the good work!
Leave a comment: