[Summary view] [Print] [Text view]

   1  /**
   2   * --------------------------------------------------------------------
   3   * jQuery customfileinput plugin
   4   * Author: Scott Jehl, [email protected]
   5   * Copyright (c) 2009 Filament Group. Updated 2012.
   6   * licensed under MIT (filamentgroup.com/examples/mit-license.txt)
   7   * --------------------------------------------------------------------
   8   */
   9  
  10  /**
  11   * All credits go to the Author of this file, some additional customization was
  12   * done for theme compat. purposes.
  13   */
  14  $.fn.customFileInput = function(options){
  15      
  16      //Get current element
  17      var fileInput = $(this);
  18      
  19      //Define settings
  20      var settings    = jQuery.extend({
  21          button_position     : 'right',
  22          classes                : fileInput.attr('class'),
  23          feedback_text        : 'No file selected...',
  24          button_text            : 'Browse',
  25          button_change_text    : 'Change'
  26      }, options);
  27      
  28      //apply events and styles for file input element
  29      fileInput
  30          .addClass('customfile-input') //add class for CSS
  31          .focus(function(){
  32              upload.addClass('customfile-focus'); 
  33              fileInput.data('val', fileInput.val());
  34          })
  35          .blur(function(){ 
  36              upload.removeClass('customfile-focus');
  37              $(this).trigger('checkChange');
  38           })
  39           .bind('disable',function(){
  40               fileInput.attr('disabled',true);
  41              upload.addClass('customfile-disabled');
  42          })
  43          .bind('enable',function(){
  44              fileInput.removeAttr('disabled');
  45              upload.removeClass('customfile-disabled');
  46          })
  47          .bind('checkChange', function(){
  48              if(fileInput.val() && fileInput.val() != fileInput.data('val')){
  49                  fileInput.trigger('change');
  50              }
  51          })
  52          .bind('change',function(){
  53              //get file name
  54              var fileName = $(this).val().split(/\\/).pop();
  55              //get file extension
  56              var fileExt = 'customfile-ext-' + fileName.split('.').pop().toLowerCase();
  57              //update the feedback
  58              uploadFeedback
  59                  .css({ width : '-=21' })
  60                  .text(fileName) //set feedback text to filename
  61                  .removeClass(uploadFeedback.data('fileExt') || '') //remove any existing file extension class
  62                  .addClass(fileExt) //add file extension class
  63                  .data('fileExt', fileExt) //store file extension for class removal on next change
  64                  .addClass('customfile-feedback-populated'); //add class to show populated state
  65              //change text of button    
  66              uploadButton.text(settings.button_change_text);    
  67          })
  68          .click(function(){ //for IE and Opera, make sure change fires after choosing a file, using an async callback
  69              fileInput.data('val', fileInput.val());
  70              setTimeout(function(){
  71                  fileInput.trigger('checkChange');
  72              },100);
  73          });
  74          
  75          //create custom control container
  76          var upload = $('<div class="input-' + (('right' === settings.button_position)?'append':'prepend') + ' customfile">');
  77          //create custom control feedback
  78          var uploadFeedback = $('<span class="customfile-feedback ' + settings.classes + '" aria-hidden="true">' + settings.feedback_text + '</span>').appendTo(upload);
  79          //create custom control button
  80          var uploadButton = $('<span class="add-on customfile-button" aria-hidden="true">' + settings.button_text + '</span>').css({ float : settings.button_position });
  81          
  82          if ('right' === settings.button_position) {
  83              uploadButton.insertAfter(uploadFeedback);
  84          } else uploadButton.insertBefore(uploadFeedback);
  85      
  86      //match disabled state
  87      if(fileInput.is('[disabled]')){
  88          fileInput.trigger('disable');
  89      } else upload.click(function () { fileInput.trigger('click'); });
  90          
  91      
  92      //insert original input file in dom, css if hide it outside of screen
  93      upload.insertAfter(fileInput);
  94      fileInput.insertAfter(upload);
  95          
  96      //return jQuery
  97      return $(this);
  98  };