Home > javascript > Custom compact jquery file size check solution before fileupload

Custom compact jquery file size check solution before fileupload

February 2Hits:4
Advertisement

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'); 

Answers

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.

Related Articles

  • Custom compact jquery file size check solution before fileuploadFebruary 2

    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 sen

  • Custom upload PHP file size for one domain?

    Custom upload PHP file size for one domain?December 10

    Hello i just want to be sure of the way and syntax to set the php upload size for one domain. I went into the sites section for the domain in question and added the below to PHP options to the Custom php.ini settings box and saved. upload_max_filesiz

  • Changing File Sizes in a PDF

    Changing File Sizes in a PDFDecember 29

    Is there a way when exporting a .psd as a .pdf to make the file smaller? My client always has me work in Photoshop and send them finished work as .pdf's, but they say the files are too big. These products are eventually printed out, so while I need t

  • efficient cross-os file size shell functionAugust 22

    I'm looking for a simpler way to have a cross-os-unix file size check. I could use wc -c but I'm concerned the performance may suck on large files (I'm assuming it just counts chars and doesn't do a stat under the covers?) The below works for linux a

  • Add column for attachment file sizeJuly 28

    EDIT. I got this working, see my own answer below: Now, if someone has any clue as to how I can get this sortable, please chime in! :) ---------------- Original question ---------------- How can I add a custom column to the attachment post type? I'm

  • PDO not showing in phpinfo() with custom php.ini file August 11

    I have a custom php.ini file which sets my session.save_path=./ With this file in place, my phpinfo() does not show PDO or PDO mysql being enabled. If I rename the php.ini file, the phpinfo() does show these as being enabled. How can I ensure they ar

  • Why the pcap file always shows more bytes downloaded than the actual file size downloaded when using wireshark?September 20

    When capturing a dump using wireshark during download of a file and then exploring the total bytes downloaded in pcap is always greater than the actual file downloaded. for example 700000 bytes shows in pcap 680000 bytes shows in original file size -

  • Sanity checks vs file sizesJune 21

    In your game assets do you make room for explicit sanity checks, or do you have some generally expected bounds which you assert? I've been thinking about how we compress data and thought that it's much better to have the former, and less of the latte

  • How to get image name, mime type, width, height, file size from post custom field?December 20

    What I need is some function to echo file name of image used in post like "image-file-name.jpg", or just "image-file-name". Also it would be great to be able to have even more information about image like: image width, image height, im

  • How to compact VirtualBox's VDI file size?January 7

    I've a VirtualBox VM which configured a very large hard disk size (bigger than host). By my mistake, a program on the VM generated lots of log files and the VDI file size keeps growing until there is no space on the host. Now I've deleted the log fil

  • Batch file to check the size and print the outoutMay 26

    I am trying to make a batch file that will check the size of f1.txt file. If the size is 1118, then "No Changes" will be displayed. If not, it will display "The file has been changed." @ECHO OFF set maxbytesize=1118 set "filename=

  • Checking file size and sending it to the serverFebruary 13

    I am currently working on a crash log sender. As the application crashes, the FindLogFiles() will search for the different crash logs we are maintaining. It will then process these files, check their size and send them to the server in fused, or spli

  • Powershell Download via HTTP using Proxy and Checking Remote File Size Fails on Second FileSeptember 1

    I have a powershell script I'm developing, which will download files from a HTTP server going through a proxy and including a UN/PW on the server. I have files downloading fine, but some files are very large, and so I've been adding a function to che

  • Checking the file size and type using phpJanuary 15

    My assignment is to make a php file for uploading files to a directory. The user should only be able to upload a file if the file size is less than 512kb and the file type is txt, zip or jpg. My code is not working properly as it ignores the output i

  • blueimp/jQuery-File-Upload Cannot Download the Image File and Cannot Upload a Bigger Size of Image

    blueimp/jQuery-File-Upload Cannot Download the Image File and Cannot Upload a Bigger Size of ImageFebruary 8

    First of all , Apologize to my poor english . So my project is plain php and mysql. and i implemented this awesome plugin which is the blueimp/jQuery-File-Upload (using this tutotial https://github.com/blueimp/jQuery-File-Upload/wiki/PHP-MySQL-databa

  • Can I reduce the file size of an SVG to be closer to its JPEG equivalent?

    Can I reduce the file size of an SVG to be closer to its JPEG equivalent?April 8

    I have an image that I'm using on a website. I would like to use an SVG so that it can be any size and still look crisp. This dropbox contains the SVG file as well as the original Illustrator file. This is a JPEG export: The SVG has a much larger fil

  • How to find the mulitple file sizes using javascript September 28

    <apex:page standardController="Case" showHeader="false" sidebar="false" standardStylesheets="False" id="pge"> <head> <link rel="stylesheet" href="{!URLFOR($Resource.web2caseRe

  • How to reduce PNG file size for web?

    How to reduce PNG file size for web?July 4

    I have a PNG-24 file with transparent background and its current size is 1.5 MB. How to reduce size or use PNG-8 file format and keep same quality ? PNG file from here: http://www19.zippyshare.com/v/69590430/file.html Example Image uploaded I tried a

  • Determine file size of image embedded in a Word documentAugust 30

    My father called me up with an issue he needed help with. He had edited a Word document he received and found out he was unable to mail it, as it was extremely large. The number of pages was low, but there were images. I knew immediately that one of

  • EXT3: If block size is 4K, why does ls -l show file sizes below that?April 28

    If you run ls -l on a file that contains one letter, it will list as 2B in size. If your file system is in 4k blocks, I thought it rounded files up to the block size? Is it because ls -l actually reads the byte count from the inode? In what circumsta

Copyright (C) 2017 ceus-now.com, All Rights Reserved. webmaster#ceus-now.com 14 q. 1.506 s.