Return to file_upload.js CVS log

Up to [LON-CAPA] / loncom / javascriptlib

- Client-side checking for uploaded file size.
 - File size checks in multi-part problems supported where different size
   limits potentially apply to essayresponse items in the different parts.
 - File size checks supported in essayresponse item(s) in composite pages.

    1: /* 
    2: The LearningOnline Network with CAPA
    3: JavaScript functions handling file uploading
    4: 
    5: $Id: file_upload.js,v 1.3 2019/08/11 14:16:55 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: */
  109: function getMaxSize (fileInput,sizeItem) {
  110:     var maxSize = 0;
  111:     var sizeId = sizeItem;
  112:     var uploadId;
  113:     try {
  114:         if ($(fileInput).hasClass("LC_hwkfile")) {
  115:             uploadId = $(fileInput).attr('id');
  116:             var re = /^(|\w*)HWFILE(.+)$/;
  117:             var found = uploadId.match(re);
  118:             if (found.length == 3) {
  119:                 sizeId = found[1]+sizeItem+'_'+found[2];
  120:             }
  121:         }
  122:         if ( $("#"+sizeId).length) {
  123:             if ( $("#"+sizeId).val() > 0) {
  124:                 maxSize = $("#"+sizeId).val();
  125:             }
  126:         }
  127:     }
  128:     catch(e) { }
  129:     return maxSize;
  130: }
  131: 
  132: /*
  133: This block adds event listeners to file upload elements.  It looks for input
  134: elements with class="LC_flUpload".
  135: 
  136:     <input type="file" class="LC_flUpload" />
  137: 
  138: It also looks for a hidden element with an id containing: "LC_free_space",
  139: which contains the maximum allowable upload size (bytes).
  140: 
  141:     <input type="hidden" id="*LC_free_space*" value="$free_space" />
  142: 
  143: The * before LC_free_space and the * after LC_free_space are PREFIX and SUFFIX.
  144: 
  145: When the contents of the input element change, the function checkUploadSize()
  146: checks if it is allowed based on size.
  147: */
  148: $( document ).ready(function() {
  149:     var upload_elements = $( ".LC_flUpload" );
  150:     for (var i=0; i<upload_elements.length; i++) {
  151:         if (getMaxSize(upload_elements[i],'LC_free_space')) {
  152:             upload_elements[i].addEventListener( "change", function(){
  153:                 checkUploadSize(this,'LC_free_space');
  154:             });
  155:         }
  156:     }
  157: });