[Summary view] [Print] [Text view]

   1  /*

   2   ### jQuery Multiple File Upload Plugin v1.48 - 2012-07-19 ###

   3   * Home: http://www.fyneworks.com/jquery/multiple-file-upload/

   4   * Code: http://code.google.com/p/jquery-multifile-plugin/

   5   *

   6   * Dual licensed under the MIT and GPL licenses:

   7   *   http://www.opensource.org/licenses/mit-license.php

   8   *   http://www.gnu.org/licenses/gpl.html

   9   ###

  10  */
  11  
  12  /*# AVOID COLLISIONS #*/

  13  ;if(window.jQuery) (function($){
  14  /*# AVOID COLLISIONS #*/

  15   
  16      // plugin initialization

  17      $.fn.MultiFile = function(options){
  18          if(this.length==0) return this; // quick fail

  19          
  20          // Handle API methods

  21          if(typeof arguments[0]=='string'){
  22              // Perform API methods on individual elements

  23              if(this.length>1){
  24                  var args = arguments;
  25                  return this.each(function(){
  26                      $.fn.MultiFile.apply($(this), args);
  27      });
  28              };
  29              // Invoke API method handler

  30              $.fn.MultiFile[arguments[0]].apply(this, $.makeArray(arguments).slice(1) || []);
  31              // Quick exit...

  32              return this;
  33          };
  34          
  35          // Initialize options for this call

  36          var options = $.extend(
  37              {}/* new object */,
  38              $.fn.MultiFile.options/* default options */,
  39              options || {} /* just-in-time options */
  40          );
  41          
  42          // Empty Element Fix!!!

  43          // this code will automatically intercept native form submissions

  44          // and disable empty file elements

  45          $('form')
  46          .not('MultiFile-intercepted')
  47          .addClass('MultiFile-intercepted')
  48          .submit($.fn.MultiFile.disableEmpty);
  49          
  50          //### http://plugins.jquery.com/node/1363

  51          // utility method to integrate this plugin with others...

  52          if($.fn.MultiFile.options.autoIntercept){
  53              $.fn.MultiFile.intercept( $.fn.MultiFile.options.autoIntercept /* array of methods to intercept */ );
  54              $.fn.MultiFile.options.autoIntercept = null; /* only run this once */
  55          };
  56          
  57          // loop through each matched element

  58          this
  59           .not('.MultiFile-applied')
  60              .addClass('MultiFile-applied')
  61          .each(function(){
  62              //#####################################################################

  63              // MAIN PLUGIN FUNCTIONALITY - START

  64              //#####################################################################

  65              
  66         // BUG 1251 FIX: http://plugins.jquery.com/project/comments/add/1251

  67         // variable group_count would repeat itself on multiple calls to the plugin.

  68         // this would cause a conflict with multiple elements

  69         // changes scope of variable to global so id will be unique over n calls

  70         window.MultiFile = (window.MultiFile || 0) + 1;
  71         var group_count = window.MultiFile;
  72         
  73         // Copy parent attributes - Thanks to Jonas Wagner

  74         // we will use this one to create new input elements

  75         var MultiFile = {e:this, E:$(this), clone:$(this).clone()};
  76         
  77         //===

  78         
  79         //# USE CONFIGURATION

  80         if(typeof options=='number') options = {max:options};
  81         var o = $.extend({},
  82          $.fn.MultiFile.options,
  83          options || {},
  84                         ($.metadata? MultiFile.E.metadata(): ($.meta?MultiFile.E.data():null)) || {}, /* metadata options */
  85                                  {} /* internals */
  86         );
  87         // limit number of files that can be selected?

  88         if(!(o.max>0) /*IsNull(MultiFile.max)*/){
  89          o.max = MultiFile.E.attr('maxlength');
  90         };
  91                              if(!(o.max>0) /*IsNull(MultiFile.max)*/){
  92                                  o.max = (String(MultiFile.e.className.match(/\b(max|limit)\-([0-9]+)\b/gi) || ['']).match(/[0-9]+/gi) || [''])[0];
  93                                  if(!(o.max>0)) o.max = -1;
  94                                  else           o.max = String(o.max).match(/[0-9]+/gi)[0];
  95                              }
  96         o.max = new Number(o.max);
  97         // limit extensions?

  98         o.accept = o.accept || MultiFile.E.attr('accept') || '';
  99         if(!o.accept){
 100          o.accept = (MultiFile.e.className.match(/\b(accept\-[\w\|]+)\b/gi)) || '';
 101          o.accept = new String(o.accept).replace(/^(accept|ext)\-/i,'');
 102         };
 103         
 104         //===

 105         
 106         // APPLY CONFIGURATION

 107                              $.extend(MultiFile, o || {});
 108         MultiFile.STRING = $.extend({},$.fn.MultiFile.options.STRING,MultiFile.STRING);
 109         
 110         //===

 111         
 112         //#########################################

 113         // PRIVATE PROPERTIES/METHODS

 114         $.extend(MultiFile, {
 115          n: 0, // How many elements are currently selected?
 116          slaves: [], files: [],
 117          instanceKey: MultiFile.e.id || 'MultiFile'+String(group_count), // Instance Key?
 118          generateID: function(z){ return MultiFile.instanceKey + (z>0 ?'_F'+String(z):''); },
 119          trigger: function(event, element){
 120           var handler = MultiFile[event], value = $(element).attr('value');
 121           if(handler){
 122            var returnValue = handler(element, value, MultiFile);
 123            if( returnValue!=null ) return returnValue;
 124           }
 125           return true;
 126          }
 127         });
 128         
 129         //===

 130         
 131         // Setup dynamic regular expression for extension validation

 132         // - thanks to John-Paul Bader: http://smyck.de/2006/08/11/javascript-dynamic-regular-expresions/

 133         if(String(MultiFile.accept).length>1){
 134                                  MultiFile.accept = MultiFile.accept.replace(/\W+/g,'|').replace(/^\W|\W$/g,'');
 135          MultiFile.rxAccept = new RegExp('\\.('+(MultiFile.accept?MultiFile.accept:'')+')$','gi');
 136         };
 137         
 138         //===

 139         
 140         // Create wrapper to hold our file list

 141         MultiFile.wrapID = MultiFile.instanceKey+'_wrap'; // Wrapper ID?

 142         MultiFile.E.wrap('<div class="MultiFile-wrap" id="'+MultiFile.wrapID+'"></div>');
 143         MultiFile.wrapper = $('#'+MultiFile.wrapID+'');
 144         
 145         //===

 146         
 147         // MultiFile MUST have a name - default: file1[], file2[], file3[]

 148         MultiFile.e.name = MultiFile.e.name || 'file'+ group_count +'[]';
 149         
 150         //===

 151         
 152                              if(!MultiFile.list){
 153                                  // Create a wrapper for the list

 154                                  // * OPERA BUG: NO_MODIFICATION_ALLOWED_ERR ('list' is a read-only property)

 155                                  // this change allows us to keep the files in the order they were selected

 156                                  MultiFile.wrapper.append( '<div class="MultiFile-list" id="'+MultiFile.wrapID+'_list"></div>' );
 157                                  MultiFile.list = $('#'+MultiFile.wrapID+'_list');
 158                              };
 159         MultiFile.list = $(MultiFile.list);
 160                              
 161         //===

 162         
 163         // Bind a new element

 164         MultiFile.addSlave = function( slave, slave_count ){
 165                                  //if(window.console) console.log('MultiFile.addSlave',slave_count);

 166                                  
 167          // Keep track of how many elements have been displayed

 168          MultiFile.n++;
 169          // Add reference to master element

 170          slave.MultiFile = MultiFile;
 171                                  
 172                                  // BUG FIX: http://plugins.jquery.com/node/1495

 173                                  // Clear identifying properties from clones

 174                                  if(slave_count>0) slave.id = slave.name = '';
 175                                  
 176          // Define element's ID and name (upload components need this!)

 177          //slave.id = slave.id || MultiFile.generateID(slave_count);

 178                                  if(slave_count>0) slave.id = MultiFile.generateID(slave_count);
 179                                  //FIX for: http://code.google.com/p/jquery-multifile-plugin/issues/detail?id=23

 180          
 181          // 2008-Apr-29: New customizable naming convention (see url below)

 182          // http://groups.google.com/group/jquery-dev/browse_frm/thread/765c73e41b34f924#

 183          slave.name = String(MultiFile.namePattern
 184           /*master name*/.replace(/\$name/gi,$(MultiFile.clone).attr('name'))
 185           /*master id  */.replace(/\$id/gi,  $(MultiFile.clone).attr('id'))
 186           /*group count*/.replace(/\$g/gi,   group_count)//(group_count>0?group_count:''))
 187           /*slave count*/.replace(/\$i/gi,   slave_count)//(slave_count>0?slave_count:''))
 188          );
 189          
 190          // If we've reached maximum number, disable input slave

 191          if( (MultiFile.max > 0) && ((MultiFile.n-1) > (MultiFile.max)) )//{ // MultiFile.n Starts at 1, so subtract 1 to find true count
 192           slave.disabled = true;
 193          //};

 194          
 195          // Remember most recent slave

 196          MultiFile.current = MultiFile.slaves[slave_count] = slave;
 197          
 198                                  // We'll use jQuery from now on

 199                                  slave = $(slave);
 200          
 201          // Clear value

 202          slave.val('').attr('value','')[0].value = '';
 203          
 204                                  // Stop plugin initializing on slaves

 205                                  slave.addClass('MultiFile-applied');
 206                                  
 207          // Triggered when a file is selected

 208          slave.change(function(){
 209            //if(window.console) console.log('MultiFile.slave.change',slave_count);

 210                                    
 211            // Lose focus to stop IE7 firing onchange again

 212            $(this).blur();
 213            
 214            //# Trigger Event! onFileSelect

 215            if(!MultiFile.trigger('onFileSelect', this, MultiFile)) return false;
 216            //# End Event!

 217            
 218            //# Retrive value of selected file from element

 219            var ERROR = '', v = String(this.value || ''/*.attr('value)*/);
 220            
 221            // check extension

 222            if(MultiFile.accept && v && !v.match(MultiFile.rxAccept))//{
 223              ERROR = MultiFile.STRING.denied.replace('$ext', String(v.match(/\.\w{1,4}$/gi)));
 224             //}

 225            //};

 226            
 227            // Disallow duplicates

 228                                          for(var f in MultiFile.slaves)//{
 229             if(MultiFile.slaves[f] && MultiFile.slaves[f]!=this)//{
 230                                            //console.log(MultiFile.slaves[f],MultiFile.slaves[f].value);

 231              if(MultiFile.slaves[f].value==v)//{
 232               ERROR = MultiFile.STRING.duplicate.replace('$file', v.match(/[^\/\\]+$/gi));
 233              //};

 234             //};

 235            //};

 236            
 237            // Create a new file input element

 238            var newEle = $(MultiFile.clone).clone();// Copy parent attributes - Thanks to Jonas Wagner

 239            //# Let's remember which input we've generated so

 240            // we can disable the empty ones before submission

 241            // See: http://plugins.jquery.com/node/1495

 242            newEle.addClass('MultiFile');
 243            
 244            // Handle error

 245            if(ERROR!=''){
 246              // Handle error

 247              MultiFile.error(ERROR);
 248                                                  
 249              // 2007-06-24: BUG FIX - Thanks to Adrian Wr�bel <adrian [dot] wrobel [at] gmail.com>

 250              // Ditch the trouble maker and add a fresh new element

 251              MultiFile.n--;
 252              MultiFile.addSlave(newEle[0], slave_count);
 253              slave.parent().prepend(newEle);
 254              slave.remove();
 255              return false;
 256            };
 257            
 258            // Hide this element (NB: display:none is evil!)

 259            $(this).css({ position:'absolute', top: '-3000px' });
 260            
 261            // Add new element to the form

 262            slave.after(newEle);
 263            
 264            // Update list

 265            MultiFile.addToList( this, slave_count );
 266            
 267            // Bind functionality

 268            MultiFile.addSlave( newEle[0], slave_count+1 );
 269            
 270            //# Trigger Event! afterFileSelect

 271            if(!MultiFile.trigger('afterFileSelect', this, MultiFile)) return false;
 272            //# End Event!

 273            
 274          }); // slave.change()

 275                                  
 276                                  // Save control to element

 277                                  $(slave).data('MultiFile', MultiFile);
 278                                  
 279         };// MultiFile.addSlave

 280         // Bind a new element

 281         
 282         
 283         
 284         // Add a new file to the list

 285         MultiFile.addToList = function( slave, slave_count ){
 286          //if(window.console) console.log('MultiFile.addToList',slave_count);

 287                                  
 288          //# Trigger Event! onFileAppend

 289          if(!MultiFile.trigger('onFileAppend', slave, MultiFile)) return false;
 290          //# End Event!

 291          
 292          // Create label elements

 293          var
 294           r = $('<div class="MultiFile-label"></div>'),
 295           v = String(slave.value || ''/*.attr('value)*/),
 296           a = $('<span class="MultiFile-title" title="'+MultiFile.STRING.selected.replace('$file', v)+'">'+MultiFile.STRING.file.replace('$file', v.match(/[^\/\\]+$/gi)[0])+'</span>'),
 297           b = $('<a class="MultiFile-remove" href="#'+MultiFile.wrapID+'">'+MultiFile.STRING.remove+'</a>');
 298          
 299          // Insert label

 300          MultiFile.list.append(
 301           r.append(b, ' ', a)
 302          );
 303          
 304          b
 305                                  .click(function(){
 306           
 307            //# Trigger Event! onFileRemove

 308            if(!MultiFile.trigger('onFileRemove', slave, MultiFile)) return false;
 309            //# End Event!

 310            
 311            MultiFile.n--;
 312            MultiFile.current.disabled = false;
 313            
 314            // Remove element, remove label, point to current

 315                                          MultiFile.slaves[slave_count] = null;
 316                                          $(slave).remove();
 317                                          $(this).parent().remove();
 318                                          
 319            // Show most current element again (move into view) and clear selection

 320            $(MultiFile.current).css({ position:'', top: '' });
 321                                          $(MultiFile.current).reset().val('').attr('value', '')[0].value = '';
 322            
 323            //# Trigger Event! afterFileRemove

 324            if(!MultiFile.trigger('afterFileRemove', slave, MultiFile)) return false;
 325            //# End Event!

 326                                          
 327            return false;
 328          });
 329          
 330          //# Trigger Event! afterFileAppend

 331          if(!MultiFile.trigger('afterFileAppend', slave, MultiFile)) return false;
 332          //# End Event!

 333          
 334         }; // MultiFile.addToList

 335         // Add element to selected files list

 336         
 337         
 338         
 339         // Bind functionality to the first element

 340         if(!MultiFile.MultiFile) MultiFile.addSlave(MultiFile.e, 0);
 341         
 342         // Increment control count

 343         //MultiFile.I++; // using window.MultiFile

 344         MultiFile.n++;
 345                              
 346                              // Save control to element

 347                              MultiFile.E.data('MultiFile', MultiFile);
 348                              
 349  
 350              //#####################################################################

 351              // MAIN PLUGIN FUNCTIONALITY - END

 352              //#####################################################################

 353          }); // each element

 354      };
 355      
 356      /*--------------------------------------------------------*/

 357      
 358      /*

 359          ### Core functionality and API ###

 360      */
 361      $.extend($.fn.MultiFile, {
 362    /**

 363     * This method removes all selected files

 364     *

 365     * Returns a jQuery collection of all affected elements.

 366     *

 367     * @name reset

 368     * @type jQuery

 369     * @cat Plugins/MultiFile

 370     * @author Diego A. (http://www.fyneworks.com/)

 371     *

 372     * @example $.fn.MultiFile.reset();

 373     */
 374    reset: function(){
 375              var settings = $(this).data('MultiFile');
 376              //if(settings) settings.wrapper.find('a.MultiFile-remove').click();

 377              if(settings) settings.list.find('a.MultiFile-remove').click();
 378     return $(this);
 379    },
 380    
 381    
 382    /**

 383     * This utility makes it easy to disable all 'empty' file elements in the document before submitting a form.

 384     * It marks the affected elements so they can be easily re-enabled after the form submission or validation.

 385     *

 386     * Returns a jQuery collection of all affected elements.

 387     *

 388     * @name disableEmpty

 389     * @type jQuery

 390     * @cat Plugins/MultiFile

 391     * @author Diego A. (http://www.fyneworks.com/)

 392     *

 393     * @example $.fn.MultiFile.disableEmpty();

 394     * @param String class (optional) A string specifying a class to be applied to all affected elements - Default: 'mfD'.

 395     */
 396    disableEmpty: function(klass){ klass = (typeof(klass)=='string'?klass:'')||'mfD';
 397     var o = [];
 398     $('input:file.MultiFile').each(function(){ if($(this).val()=='') o[o.length] = this; });
 399     return $(o).each(function(){ this.disabled = true }).addClass(klass);
 400    },
 401    
 402    
 403          /**

 404              * This method re-enables 'empty' file elements that were disabled (and marked) with the $.fn.MultiFile.disableEmpty method.

 405              *

 406              * Returns a jQuery collection of all affected elements.

 407              *

 408              * @name reEnableEmpty

 409              * @type jQuery

 410              * @cat Plugins/MultiFile

 411              * @author Diego A. (http://www.fyneworks.com/)

 412              *

 413              * @example $.fn.MultiFile.reEnableEmpty();

 414              * @param String klass (optional) A string specifying the class that was used to mark affected elements - Default: 'mfD'.

 415              */
 416    reEnableEmpty: function(klass){ klass = (typeof(klass)=='string'?klass:'')||'mfD';
 417     return $('input:file.'+klass).removeClass(klass).each(function(){ this.disabled = false });
 418    },
 419    
 420    
 421          /**

 422              * This method will intercept other jQuery plugins and disable empty file input elements prior to form submission

 423              *

 424      

 425              * @name intercept

 426              * @cat Plugins/MultiFile

 427              * @author Diego A. (http://www.fyneworks.com/)

 428              *

 429              * @example $.fn.MultiFile.intercept();

 430              * @param Array methods (optional) Array of method names to be intercepted

 431              */
 432    intercepted: {},
 433    intercept: function(methods, context, args){
 434     var method, value; args = args || [];
 435     if(args.constructor.toString().indexOf("Array")<0) args = [ args ];
 436     if(typeof(methods)=='function'){
 437      $.fn.MultiFile.disableEmpty();
 438      value = methods.apply(context || window, args);
 439                  //SEE-http://code.google.com/p/jquery-multifile-plugin/issues/detail?id=27

 440                  setTimeout(function(){ $.fn.MultiFile.reEnableEmpty() },1000);
 441      return value;
 442     };
 443     if(methods.constructor.toString().indexOf("Array")<0) methods = [methods];
 444     for(var i=0;i<methods.length;i++){
 445      method = methods[i]+''; // make sure that we have a STRING

 446      if(method) (function(method){ // make sure that method is ISOLATED for the interception
 447       $.fn.MultiFile.intercepted[method] = $.fn[method] || function(){};
 448       $.fn[method] = function(){
 449        $.fn.MultiFile.disableEmpty();
 450        value = $.fn.MultiFile.intercepted[method].apply(this, arguments);
 451                          //SEE http://code.google.com/p/jquery-multifile-plugin/issues/detail?id=27

 452        setTimeout(function(){ $.fn.MultiFile.reEnableEmpty() },1000);
 453        return value;
 454       }; // interception

 455      })(method); // MAKE SURE THAT method IS ISOLATED for the interception

 456     };// for each method

 457    } // $.fn.MultiFile.intercept

 458          
 459   });
 460      
 461      /*--------------------------------------------------------*/

 462      
 463      /*

 464          ### Default Settings ###

 465          eg.: You can override default control like this:

 466          $.fn.MultiFile.options.accept = 'gif|jpg';

 467      */
 468      $.fn.MultiFile.options = { //$.extend($.fn.MultiFile, { options: {
 469          accept: '', // accepted file extensions
 470          max: -1,    // maximum number of selectable files
 471          
 472          // name to use for newly created elements

 473          namePattern: '$name', // same name by default (which creates an array)
 474           /*master name*/ // use $name
 475           /*master id  */ // use $id
 476           /*group count*/ // use $g
 477           /*slave count*/ // use $i
 478                                      /*other      */ // use any combination of he above, eg.: $name_file$i
 479          
 480          // STRING: collection lets you show messages in different languages

 481          STRING: {
 482              remove:'x',
 483              denied:'You cannot select a $ext file.\nTry again...',
 484              file:'$file',
 485              selected:'File selected: $file',
 486              duplicate:'This file has already been selected:\n$file'
 487          },
 488          
 489          // name of methods that should be automcatically intercepted so the plugin can disable

 490          // extra file elements that are empty before execution and automatically re-enable them afterwards

 491    autoIntercept: [ 'submit', 'ajaxSubmit', 'ajaxForm', 'validate', 'valid' /* array of methods to intercept */ ],
 492          
 493          // error handling function

 494          error: function(s){
 495              /*

 496              ERROR! blockUI is not currently working in IE

 497              if($.blockUI){

 498                  $.blockUI({

 499                      message: s.replace(/\n/gi,'<br/>'),

 500                      css: { 

 501                          border:'none', padding:'15px', size:'12.0pt',

 502                          backgroundColor:'#900', color:'#fff',

 503                          opacity:'.8','-webkit-border-radius': '10px','-moz-border-radius': '10px'

 504                      }

 505                  });

 506                  window.setTimeout($.unblockUI, 2000);

 507              }

 508              else//{// save a byte!

 509              */
 510               alert(s);
 511              //}// save a byte!

 512          }
 513   }; //} });

 514      
 515      /*--------------------------------------------------------*/

 516      
 517      /*

 518          ### Additional Methods ###

 519          Required functionality outside the plugin's scope

 520      */
 521      
 522      // Native input reset method - because this alone doesn't always work: $(element).val('').attr('value', '')[0].value = '';

 523      $.fn.reset = function(){ return this.each(function(){ try{ this.reset(); }catch(e){} }); };
 524      
 525      /*--------------------------------------------------------*/

 526      
 527      /*

 528          ### Default implementation ###

 529          The plugin will attach itself to file inputs

 530          with the class 'multi' when the page loads

 531      */
 532      $(function(){
 533    //$("input:file.multi").MultiFile();

 534    $("input[type=file].multi").MultiFile();
 535   });
 536      
 537      
 538      
 539  /*# AVOID COLLISIONS #*/

 540  })(jQuery);
 541  /*# AVOID COLLISIONS #*/