Custom compact jquery file size check solution before fileupload

Question

I have an html page that allows users to upload a csv document. It uses the jquery file upload library. The csv is sent to the server and does some stuff and returns a result. This all works fine.

Now I've been asked to check the file size before sending the file over to the server. I know that jquery file upload has options to validate all kinds of stuff but the problem is that

• I'd like to avoid adding additional libraries to an already over bloated page
• I'd rather not modify the existing $('#fileupload').fileupload() code

So this is what I was thinking

1. Before the $('#fileupload').fileupload() gets called I need another function to be called first
2. This new function will check the file size
3. If size is under size limit, it will carry on with the fileupload, otherwise, return a message to user.

I'm a server developer and jquery is not my strong point. Would my idea work? So my question is, how do I call a function before the fileupload() and what code can I use to check for the size? The solution only needs to work in modern browsers. If someone uses an old browser, I will still catch it on the server side. Any guidance or ideas of how to do this would be extremely appreciated.

HTML CODE

 /*
  * jQuery File Upload Plugin 5.42.3
  * https://github.com/blueimp/jQuery-File-Upload
  */
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>     
 <script type="text/javascript" src="js/jquery.ui.widget.js"></script>   
 <script type="text/javascript" src="js/upload.js"></script>
 <script type="text/javascript" src="js/jquery.fileupload.js"></script>
/** other unrelated stuff here **/

 <span class="button fileinput-button"> 
     <span>CSV</span>
     <input id="fileupload" type="file" name="file" multiple/>
 </span>    

JQuery Code

   $('#fileupload').fileupload({
       url: url,
       dataType: 'json',
       formData: {lang: $('#language_id').val()},        
       done: function (e, data) {
            if(data.result.reportData == null) {
                showPreviewError(data.result.errorMsg);
            } else {
                report.reportGroups=data.result.reportData;
                initializeUI();
                showPreviewSuccess();
            }           
       }
    }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');

Answer 1

HTML5 introduced the File API. It's not supported in some of the older browsers but you can check a file's size like this.

 $(function() { $("#fileUpload").on("change", function() { var input = this; if (input.files && input.files[0]) { // check the File API is supported alert("File size: " + input.files[0].size + "KB"); } else { alert("File API not supported"); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="fileUpload" type="file" /> 

Check here for more info.