jQuery file input plugin – styling with Bootstrap

Today we write few words about useful jQuery file input plugin, which can help us with styling HTML file inputs.

jQuery file input plugin for our forms

The inputfile.js is a jQuery plugin for file input (upload), that replaces the standard file input with a file select button. Additionally it gives us the ability to remove the selection easily (remove button, icon).

jQuery plugin for styling file inputs
jQuery plugin for styling file inputs

This small jQuery file input plugin help us with replacing standard, boring appearance of file input, in a simple way.

Code example

$('input[type="file"]').inputfile({
  var t = '<span class="glyphicon glyphicon-upload"></span> Select';
  uploadText: t,

  removeText: '<span class="glyphicon glyphicon-trash"></span>',
  restoreText: '<span class="glyphicon glyphicon-remove"></span>',

  uploadButtonClass: 'btn btn-primary',
  removeButtonClass: 'btn btn-default',

  removeName: '',
  removeValue: 1,

  dontRemove: false
});

The list of parameters:

– uploadText: Content for the upload button

– removeText: Content for the remove button

– restoreText: Content for the restore button

– uploadButtonClass: Css class for the upload button

– removeButtonClass: Css class for the remove / restore button

– removeName: Input name to use when the file is deleted

– removeValue: Value to send when the file is removed, 1 by default

– dontRemove: If true the remove functionality will be disabled

Tip: to laod a previously updated file you can set two attributes, a data-value with the url of the file and a data-text with the name of the file:

<input type="file" data-value="/res/uploads/file.txt" 
data-text="file.txt" />

See more and download this solution from GitHub:

https://github.com/kileras/jquery.inputfile.js

Also you may like another, similar solution:

http://moro.es/projects/jquery-nicefileinput-js

Enjoy!

Share:Share on Facebook1Share on Google+0Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1