[LON-CAPA-cvs] cvs: rat / lonpage.pm loncom/javascriptlib file_upload.js

raeburn raeburn at source.lon-capa.org
Sun Aug 11 10:17:00 EDT 2019


raeburn		Sun Aug 11 14:17:00 2019 EDT

  Modified files:              
    /loncom/javascriptlib	file_upload.js 
    /rat	lonpage.pm 
  Log:
  - 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.
  
  
Index: loncom/javascriptlib/file_upload.js
diff -u loncom/javascriptlib/file_upload.js:1.2 loncom/javascriptlib/file_upload.js:1.3
--- loncom/javascriptlib/file_upload.js:1.2	Wed Aug  7 16:08:17 2019
+++ loncom/javascriptlib/file_upload.js	Sun Aug 11 14:16:55 2019
@@ -2,7 +2,7 @@
 The LearningOnline Network with CAPA
 JavaScript functions handling file uploading
 
-$Id: file_upload.js,v 1.2 2019/08/07 16:08:17 raeburn Exp $
+$Id: file_upload.js,v 1.3 2019/08/11 14:16:55 raeburn Exp $
 
 Copyright Michigan State University Board of Trustees
 
@@ -30,20 +30,36 @@
 
 
 /*
-This function accepts a file input element and a maximum upload size.  If the 
-file(s) is too large, an alert is shown and the input is cleared.  It is better
-to do this check on the client before uploading.
+This function accepts a file input element and the universal part of the id 
+used for the hidden input element containing maximum upload size permitted.
+If the file(s) is too large, an alert is shown and the input is cleared.
 
 INPUT:
     fileInput -
         <input type="file" class="LC_flUpload" />
         Using the class "LC_flUpload" is needed to use the event handlers below.
-    maxSize -
-        Maximum upload size in bytes.  It is usually calculated from quota and 
-        disk usage.
+    sizeItem -
+        <input type="hidden" id="PREFIXsizeItemSUFFIX" value="$maxsize" /> 
+
+    The PREFIX is empty unless the resource is within a composite page.
+    
+    The SUFFIX is empty in cases where there will only ever be one file upload
+    input element in a web page. Otherwise it will contain a unique identifier,
+    so different maximum sizes can exist for each upload element.
+ 
+    The value assigned to the hidden element is the maximum upload size in bytes.
+
+    It is either calculated from quota and disk usage (e.g., upload to a course,
+    authoring space or portfolio space), or is set by a parameter (e.g., upload
+    to a dropbox, essayresponse or externalresponse item), or is hard-coded 
+    (e.g., upload to the help request form, or an attachment to a discussion post
+    or feedback message).
+
 */
-function checkUploadSize (fileInput, maxSize) {
+
+function checkUploadSize (fileInput,sizeItem) {
     try {
+        var maxSize = getMaxSize(fileInput,sizeItem);
         var fileSize = 0;
         if ('files' in fileInput) {
             if (fileInput.files.length > 0) {
@@ -55,7 +71,7 @@
                     clearFileInput(fileInput);
                 }
             }
-        } else { alert("no files in upFiles");}
+        } else { alert("no files selected for upload");}
     } catch (e) { alert("Error is: " + e); }
 }
 
@@ -69,32 +85,73 @@
 function clearFileInput(ctrl) {
     try {
         ctrl.value = null;
-    } catch(ex) { }
+    } catch(e) { }
     if (ctrl.value) {
         ctrl.parentNode.replaceChild(ctrl.cloneNode(true), ctrl);
     }
 }
 
 /*
+This function retrieves the allowed maximum file size for a file input element
+INPUT:
+    fileInput -
+        <input type="file" />
+    sizeItem -
+        <input type="hidden" id="PREFIXsizeItemSUFFIX" />
+
+    For upload to a dropbox, essayresponse or externalresponse item,
+    the PREFIX and SUFFIX are extracted from the id of the file upload 
+    element, by separating the id into parts before and after HWFILE.
+
+    The PREFIX is empty unless the resource is within a composite page.
+
+*/
+function getMaxSize (fileInput,sizeItem) {
+    var maxSize = 0;
+    var sizeId = sizeItem;
+    var uploadId;
+    try {
+        if ($(fileInput).hasClass("LC_hwkfile")) {
+            uploadId = $(fileInput).attr('id');
+            var re = /^(|\w*)HWFILE(.+)$/;
+            var found = uploadId.match(re);
+            if (found.length == 3) {
+                sizeId = found[1]+sizeItem+'_'+found[2];
+            }
+        }
+        if ( $("#"+sizeId).length) {
+            if ( $("#"+sizeId).val() > 0) {
+                maxSize = $("#"+sizeId).val();
+            }
+        }
+    }
+    catch(e) { }
+    return maxSize;
+}
+
+/*
 This block adds event listeners to file upload elements.  It looks for input
 elements with class="LC_flUpload".
 
     <input type="file" class="LC_flUpload" />
 
-It also looks for a hidden element with id="free_space" that contains the maximum
-upload size.
+It also looks for a hidden element with an id containing: "LC_free_space",
+which contains the maximum allowable upload size (bytes).
+
+    <input type="hidden" id="*LC_free_space*" value="$free_space" />
 
-    <input type="hidden" id="free_space" value="$free_space" />
+The * before LC_free_space and the * after LC_free_space are PREFIX and SUFFIX.
 
 When the contents of the input element change, the function checkUploadSize()
 checks if it is allowed based on size.
 */
 $( document ).ready(function() {
-    var maxSize = $( "#free_space" ).val();
     var upload_elements = $( ".LC_flUpload" );
     for (var i=0; i<upload_elements.length; i++) {
-        upload_elements[i].addEventListener( "change", function(){
-            checkUploadSize(this, maxSize);
-        });
+        if (getMaxSize(upload_elements[i],'LC_free_space')) {
+            upload_elements[i].addEventListener( "change", function(){
+                checkUploadSize(this,'LC_free_space');
+            });
+        }
     }
 });
Index: rat/lonpage.pm
diff -u rat/lonpage.pm:1.127 rat/lonpage.pm:1.128
--- rat/lonpage.pm:1.127	Sun Aug 11 12:27:15 2019
+++ rat/lonpage.pm	Sun Aug 11 14:16:59 2019
@@ -1,7 +1,7 @@
 # The LearningOnline Network with CAPA
 # Page Handler
 #
-# $Id: lonpage.pm,v 1.127 2019/08/11 12:27:15 raeburn Exp $
+# $Id: lonpage.pm,v 1.128 2019/08/11 14:16:59 raeburn Exp $
 #
 # Copyright Michigan State University Board of Trustees
 #
@@ -621,7 +621,9 @@
 				  "\n</script>\n";
 			  }
                           if (($nforms) && ($nuploads)) {
-                              $allscript .= &Apache::lonhtmlcommon::file_submissionchk_js(\%turninpaths,\%multiresps);
+                              $allscript .= &Apache::lonhtmlcommon::file_submissionchk_js(\%turninpaths,\%multiresps).
+                                            '<script type="text/javascript" '.
+                                            'src="/res/adm/includes/file_upload.js"></script>';
                           }
                           if (($nforms) && (&Apache::lonhtmlcommon::htmlareabrowser())) {
                               my %textarea_args = (




More information about the LON-CAPA-cvs mailing list