validate file size on change

begin normal post form deprecation

4chan_x.user.js

@@ -1247,6 +1247,7 @@
       fileDiv = $.el('div', {
         innerHTML: '<input type=file name=upfile><a>X</a>'
       });
+      $.bind(fileDiv.firstChild('change', qr.validateFileSize));
       $.bind(fileDiv.lastChild, 'click', (function() {
         return $.rm(this.parentNode);
       }));
@@ -1319,6 +1320,7 @@
       $.bind($('input[name=name]', qr.el), 'mousedown', function(e) {
         return e.stopPropagation();
       });
+      $.bind($('input[name=upfile]', qr.el), 'change', qr.validateFileSize);
       $.bind($('#close', qr.el), 'click', qr.close);
       $.bind($('form', qr.el), 'submit', qr.submit);
       $.bind($('a[name=attach]', qr.el), 'click', qr.attach);
@@ -1406,7 +1408,7 @@
       return $('input[name=pwd]', qr.el).value = (m = c.match(/4chan_pass=([^;]+)/)) ? decodeURIComponent(m[1]) : $('input[name=pwd]').value;
     },
     submit: function(e) {
-      var id, inputfile, isQR, op;
+      var id, isQR, op;
       if (conf['Auto Watch Reply'] && conf['Thread Watcher']) {
         if (g.REPLY && $('img.favicon').src === Favicon.empty) {
           watcher.watch(null, g.THREAD_ID);
@@ -1419,17 +1421,7 @@
         }
       }
       isQR = this.id === 'qr_form';
-      inputfile = $('input[type=file]', this);
+      if (this.id === 'qr_form') {
-      if (inputfile.value && inputfile.files[0].size > $('input[name=MAX_FILE_SIZE]').value) {
-        if (e) {
-          e.preventDefault();
-        }
-        if (isQR) {
-          return $('#error', qr.el).textContent = 'Error: File too large.';
-        } else {
-          return alert('Error: File too large.');
-        }
-      } else if (isQR) {
         if (!e) {
           this.submit();
         }
@@ -1490,6 +1482,20 @@
         }
         return window.location = url;
       }
+    },
+    validateFileSize: function(e) {
+      var file;
+      if (!(this.files[0].size > $('input[name=MAX_FILE_SIZE]').value)) {
+        return;
+      }
+      file = $.el('input', {
+        type: 'file',
+        name: 'upfile'
+      });
+      $.bind(file, 'change', qr.validateFileSize);
+      $.replace(this, file);
+      $('#error', qr.el).textContent = 'Error: File too large.';
+      return alert('Error: File too large.');
     }
   };
   threading = {

script.coffee

@@ -967,7 +967,7 @@ cooldown =
 
 qr =
   # TODO
-  # error handling
+  # error handling / logging
   # persistent captcha
   # rm Recaptcha
   # error too large error should happen on attach
@@ -988,6 +988,7 @@ qr =
   attach: ->
     $('#auto', qr.el).checked = true
     fileDiv = $.el 'div', innerHTML: '<input type=file name=upfile><a>X</a>'
+    $.bind fileDiv.firstChild 'change', qr.validateFileSize
     $.bind fileDiv.lastChild, 'click', (-> $.rm @parentNode)
     $.prepend qr.files, fileDiv
 
@@ -1064,6 +1065,7 @@ qr =
     $('textarea', qr.el).value = $('textarea').value
 
     $.bind $('input[name=name]',          qr.el), 'mousedown', (e) -> e.stopPropagation()
+    $.bind $('input[name=upfile]',        qr.el), 'change', qr.validateFileSize
     $.bind $('#close',                    qr.el), 'click', qr.close
     $.bind $('form',                      qr.el), 'submit', qr.submit
     $.bind $('a[name=attach]',            qr.el), 'click', qr.attach
@@ -1152,15 +1154,7 @@ qr =
 
     isQR = @id is 'qr_form'
 
-    inputfile = $('input[type=file]', @)
+    if @id is 'qr_form'
-    if inputfile.value and inputfile.files[0].size > $('input[name=MAX_FILE_SIZE]').value
-      e.preventDefault() if e
-      if isQR
-        $('#error', qr.el).textContent = 'Error: File too large.'
-      else
-        alert 'Error: File too large.'
-
-    else if isQR
       if !e then @submit()
       $('#error', qr.el).textContent = ''
       $('#autohide', qr.el).checked = true if conf['Auto Hide QR']
@@ -1211,6 +1205,16 @@ qr =
 
       window.location = url
 
+  validateFileSize: (e) ->
+    return unless @files[0].size > $('input[name=MAX_FILE_SIZE]').value
+
+    file = $.el 'input', type: 'file', name: 'upfile'
+    $.bind file, 'change', qr.validateFileSize
+    $.replace @, file
+
+    $('#error', qr.el).textContent = 'Error: File too large.'
+    alert 'Error: File too large.'
+
 threading =
   init: ->
     # don't thread image controls