Return to file_upload.js CVS log

Up to [LON-CAPA] / loncom / javascriptlib

- Satisfy w3c HTML validation: id attributes must be unique.

    1: /* 
    2: The LearningOnline Network with CAPA
    3: JavaScript functions handling file uploading
    4: 
    5: $Id: file_upload.js,v 1.4 2023/07/11 22:24:30 raeburn Exp $
    6: 
    7: Copyright Michigan State University Board of Trustees
    8: 
    9: This file is part of the LearningOnline Network with CAPA (LON-CAPA).
   10: 
   11: LON-CAPA is free software; you can redistribute it and/or modify
   12: it under the terms of the GNU General Public License as published by
   13: the Free Software Foundation; either version 2 of the License, or
   14: (at your option) any later version.
   15: 
   16: LON-CAPA is distributed in the hope that it will be useful,
   17: but WITHOUT ANY WARRANTY; without even the implied warranty of
   18: MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
   19: GNU General Public License for more details.
   20: 
   21: You should have received a copy of the GNU General Public License
   22: along with LON-CAPA; if not, write to the Free Software
   23: Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
   24: 
   25: /home/httpd/html/adm/gpl.txt
   26: 
   27: http://www.lon-capa.org/
   28: */
   29: 
   30: 
   31: 
   32: /*
   33: This function accepts a file input element and the universal part of the id 
   34: used for the hidden input element containing maximum upload size permitted.
   35: If the file(s) is too large, an alert is shown and the input is cleared.
   36: 
   37: INPUT:
   38:     fileInput -
   39:         <input type="file" class="LC_flUpload" />
   40:         Using the class "LC_flUpload" is needed to use the event handlers below.
   41:     sizeItem -
   42:         <input type="hidden" id="PREFIXsizeItemSUFFIX" value="$maxsize" /> 
   43: 
   44:     The PREFIX is empty unless the resource is within a composite page.
   45:     
   46:     The SUFFIX is empty in cases where there will only ever be one file upload
   47:     input element in a web page. Otherwise it will contain a unique identifier,
   48:     so different maximum sizes can exist for each upload element.
   49:  
   50:     The value assigned to the hidden element is the maximum upload size in bytes.
   51: 
   52:     It is either calculated from quota and disk usage (e.g., upload to a course,
   53:     authoring space or portfolio space), or is set by a parameter (e.g., upload
   54:     to a dropbox, essayresponse or externalresponse item), or is hard-coded 
   55:     (e.g., upload to the help request form, or an attachment to a discussion post
   56:     or feedback message).
   57: 
   58: */
   59: 
   60: function checkUploadSize (fileInput,sizeItem) {
   61:     try {
   62:         var maxSize = getMaxSize(fileInput,sizeItem);
   63:         var fileSize = 0;
   64:         if ('files' in fileInput) {
   65:             if (fileInput.files.length > 0) {
   66:                 for (var i = 0; i < fileInput.files.length; i++) {
   67:                     fileSize += fileInput.files[i].size;
   68:                 }
   69:                 if (fileSize > maxSize) {
   70:                     alert("File(s) too large to be attached");
   71:                     clearFileInput(fileInput);
   72:                 }
   73:             }
   74:         } else { alert("no files selected for upload");}
   75:     } catch (e) { alert("Error is: " + e); }
   76: }
   77: 
   78: /* 
   79: This function clears the contents of a file input element.
   80: 
   81: INPUT:
   82:     ctrl -
   83:         <input type="file" />
   84: */
   85: function clearFileInput(ctrl) {
   86:     try {
   87:         ctrl.value = null;
   88:     } catch(e) { }
   89:     if (ctrl.value) {
   90:         ctrl.parentNode.replaceChild(ctrl.cloneNode(true), ctrl);
   91:     }
   92: }
   93: 
   94: /*
   95: This function retrieves the allowed maximum file size for a file input element
   96: INPUT:
   97:     fileInput -
   98:         <input type="file" />
   99:     sizeItem -
  100:         <input type="hidden" id="PREFIXsizeItemSUFFIX" />
  101: 
  102:     For upload to a dropbox, essayresponse or externalresponse item,
  103:     the PREFIX and SUFFIX are extracted from the id of the file upload 
  104:     element, by separating the id into parts before and after HWFILE.
  105: 
  106:     The PREFIX is empty unless the resource is within a composite page.
  107: 
  108:     For upload to "IMS upload" in Main Content or "Upload File" in 
  109:     Supplemental Content in the Course Editor, the SUFFIX is extracted 
  110:     from the id of the file upload element, by splitting the id on
  111:     underscore, and using the second element.
  112: 
  113: */
  114: function getMaxSize (fileInput,sizeItem) {
  115:     var maxSize = 0;
  116:     var sizeId = sizeItem;
  117:     var uploadId;
  118:     try {
  119:         if ($(fileInput).hasClass("LC_hwkfile")) {
  120:             uploadId = $(fileInput).attr('id');
  121:             var re = /^(|\w*)HWFILE(.+)$/;
  122:             var found = uploadId.match(re);
  123:             if (found.length == 3) {
  124:                 sizeId = found[1]+sizeItem+'_'+found[2];
  125:             }
  126:         } else if ($(fileInput).hasClass("LC_uploaddoc")) {
  127:             uploadId = $(fileInput).attr('id');
  128:             var re = /^uploaddoc(.+)$/;
  129:             var found = uploadId.match(re);
  130:             if (found.length == 2) {
  131:                 sizeId = sizeItem+'_'+found[1]; 
  132:             }
  133:         }
  134:         if ( $("#"+sizeId).length) {
  135:             if ( $("#"+sizeId).val() > 0) {
  136:                 maxSize = $("#"+sizeId).val();
  137:             }
  138:         }
  139:     }
  140:     catch(e) { }
  141:     return maxSize;
  142: }
  143: 
  144: /*
  145: This block adds event listeners to file upload elements.  It looks for input
  146: elements with class="LC_flUpload".
  147: 
  148:     <input type="file" class="LC_flUpload" />
  149: 
  150: It also looks for a hidden element with an id containing: "LC_free_space",
  151: which contains the maximum allowable upload size (bytes).
  152: 
  153:     <input type="hidden" id="*LC_free_space*" value="$free_space" />
  154: 
  155: The * before LC_free_space and the * after LC_free_space are PREFIX and SUFFIX.
  156: 
  157: When the contents of the input element change, the function checkUploadSize()
  158: checks if it is allowed based on size.
  159: */
  160: $( document ).ready(function() {
  161:     var upload_elements = $( ".LC_flUpload" );
  162:     for (var i=0; i<upload_elements.length; i++) {
  163:         if (getMaxSize(upload_elements[i],'LC_free_space')) {
  164:             upload_elements[i].addEventListener( "change", function(){
  165:                 checkUploadSize(this,'LC_free_space');
  166:             });
  167:         }
  168:     }
  169: });