Return to file_upload.js CVS log

Up to [LON-CAPA] / loncom / javascriptlib

File size checking for uploaded files

A new javascript file, file_upload.js, handles client side file size checking.
The function, checkUploadSize(), accepts an html file input element and a maximum
file size (in bytes) as input.  If the size of the file to be uploaded exceeds the
size allowed, a message is displayed the the element is cleared.  Server side
checking is still used if it passes this test.

Loading file_upload.js adds event handlers to file input elements with
class="flUpload".
    <input type="file" class="flUpload" />

It also looks for a hidden element with id="free_space" that contains the maximum
upload size.
    <input type="hidden" id="free_space" value="$free_space" />

The free space is usually calculated by subtracting a user's disk usage from their
quota allowance.  In some cases it is a fixed value.

I have implemented this for every upload instance I could find.  These include:
* Message attachments
* Authoring space
* Portfolio
* Course editor
* Essay response problems
* Helpdesk request forms
* RSS feed uploads

/* 
The LearningOnline Network with CAPA
JavaScript functions handling file uploading

$Id: file_upload.js,v 1.1 2015/06/18 20:19:18 musolffc Exp $

Copyright Michigan State University Board of Trustees

This file is part of the LearningOnline Network with CAPA (LON-CAPA).

LON-CAPA is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.

LON-CAPA is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with LON-CAPA; if not, write to the Free Software
Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA

/home/httpd/html/adm/gpl.txt

http://www.lon-capa.org/
*/



/*
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.

INPUT:
    fileInput -
        <input type="file" class="flUpload" />
        Using the class "flUpload" is needed to use the event handlers below.
    maxSize -
        Maximum upload size in bytes.  It is usually calculated from quota and 
        disk usage.
*/
function checkUploadSize (fileInput, maxSize) {
    try {
        var fileSize = 0;
        if ('files' in fileInput) {
            if (fileInput.files.length > 0) {
                for (var i = 0; i < fileInput.files.length; i++) {
                    fileSize += fileInput.files[i].size;
                }
                if (fileSize > maxSize) {
                    alert("File(s) too large to be attached");
                    clearFileInput(fileInput);
                }
            }
        } else { alert("no files in upFiles");}
    } catch (e) { alert("Error is: " + e); }
}

/* 
This function clears the contents of a file input element.

INPUT:
    ctrl -
        <input type="file" />
*/
function clearFileInput(ctrl) {
    try {
        ctrl.value = null;
    } catch(ex) { }
    if (ctrl.value) {
        ctrl.parentNode.replaceChild(ctrl.cloneNode(true), ctrl);
    }
}

/*
This block adds event listeners to file upload elements.  It looks for input
elements with class="flUpload".

    <input type="file" class="flUpload" />

It also looks for a hidden element with id="free_space" that contains the maximum
upload size.

    <input type="hidden" id="free_space" value="$free_space" />

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 = $( ".flUpload" );
    for (var i=0; i<upload_elements.length; i++) {
        upload_elements[i].addEventListener( "change", function(){
            checkUploadSize(this, maxSize);
        });
    }
});