Limit the size of a file upload html input element

Question

I would like to simply limit the size of a file that a user can upload   I thought maxlength   20000   20k but that doesn t seem to work at all     I am running on Rails  not PHP  but was thinking it d be much simpler to do it client side in the HTML CSS  or as a last resort using jQuery  This is so basic though that there must be some HTML tag I am missing or not aware of   Looking to support IE7   Chrome  FF3 6   I suppose I could get away with just supporting IE8  if necessary   Thanks

User · Answer

Video file example  HTML   Javascript    x000D   x000D  function upload check         var upl   document getElementById  file id        var max   document getElementById  max id   value       if upl files 0  size  gt  max               alert  File too big            upl value                x000D   lt form action  some script  method  post  enctype  multipart form-data  gt       lt input id  max id  type  hidden  name  MAX FILE SIZE  value  250000000    gt       lt input onchange  upload check    id  file id  type  file  name  file name  accept  video      gt       lt input type  submit  value  Upload   gt   lt  form gt  x000D   x000D   x000D

User · Answer

x000D   x000D  const input   document getElementById  input   x000D   x000D  input addEventListener  change    event    gt    x000D    const target   event target x000D     if  target files  amp  amp  target files 0     x000D   x000D          Maximum allowed size in bytes x000D          5MB Example x000D          Change first operand multiplier  for your needs   x000D        const maxAllowedSize   5   1024   1024  x000D        if  target files 0  size  gt  maxAllowedSize    x000D            Here you can ask your users to load correct file x000D          target value      x000D          x000D      x000D     x000D   lt input type  file  id  input    gt  x000D   x000D   x000D

User · Answer

x000D   x000D  const input   document getElementById  input   x000D   x000D  input addEventListener  change    event    gt    x000D    const target   event target x000D     if  target files  amp  amp  target files 0     x000D   x000D          Maximum allowed size in bytes x000D          5MB Example x000D          Change first operand multiplier  for your needs   x000D        const maxAllowedSize   5   1024   1024  x000D        if  target files 0  size  gt  maxAllowedSize    x000D            Here you can ask your users to load correct file x000D          target value      x000D          x000D      x000D     x000D   lt input type  file  id  input    gt  x000D   x000D   x000D    If you need to validate file type  write in comments below and I ll share my solution    Spoiler  accept attribute is not bulletproof solution

User · Answer

lt script type  text javascript  gt        document  ready function               var uploadField   document getElementById  file             uploadField onchange   function                  if  this files 0  size  gt  300000                    this value                       swal                       title   File is larger than 300 KB                          text   Please Select a file smaller than 300 KB                       type   error                       timer  4000                      onOpen       gt                            swal showLoading                           timerInterval   setInterval      gt                                swal getContent   querySelector  strong                                    textContent   swal getTimerLeft                              100                                             onClose       gt                            clearInterval timerInterval                                            then  result    gt                        if                              Read more about handling dismissals                         result dismiss     swal DismissReason timer                                                    console log  I was closed by the timer                                                                                    lt  script gt

User · Answer

This is completely possible  Use Javascript   I use jQuery to select the input element  I have it set up with an on change event       aFile upload   on  change   function  e         var count 1      var files   e currentTarget files     puts all files into an array         call them as such  files 0  size will get you the file size of the 0th file     for  var x in files             var filesize     files x  size 1024  1024  toFixed 4      MB          if  files x  name     item   amp  amp  typeof files x  name     undefined   amp  amp  filesize  lt   10                  if  count  gt  1                     approvedHTML         files x  name                            else                    approvedHTML    files x  name                             count                            approvedFiles   val approvedHTML          The code above saves all the file names that I deem worthy of persisting to the submission page  before the submit actually happens  I add the  approved  files to an input element s val using jQuery so a form submit will send the names of the files I want to save  All the files will be submitted  however  now on the server side we do have to filter these out  I haven t written any code for that yet  but use your imagination  I assume one can accomplish this by a for loop and matching the names sent over from the input field and match them to the   FILES PHP Superglobal  sorry I dont know ruby file variable  variable    My point is you can do checks for files before submission  I do this and then output it to the user before he she submits the form  to let them know what they are uploading to my site  Anything that doesn t meet the criteria does not get displayed back to the user and therefore they should know  that the files that are too large wont be saved  This should work on all browsers because I m not using FormData object

User · Answer

You can t do it client-side  You ll have to do it on the server  Edit  This answer is outdated  As the time of this edit  HTML file API is now supported on all major browsers  I d provide an update with solution  but  mark inman winning already did it  Keep in mind that even if it s now possible to validate on the client  you should still validate it on the server  though  All client side validations can be bypassed

User · Answer

var uploadField   document getElementById  file     uploadField onchange   function         if this files 0  size  gt  2097152          alert  File is too big            this value                   This example should work fine  I set it up for roughly 2MB  1MB in Bytes is 1 048 576 so you can multiply it by the limit you need   Here is the jsfiddle example for more clearence  https   jsfiddle net 7bjfr 808

[html] Limit the size of a file upload (html input element)

Examples related to html