Revert "Replace usual file input by custom elements."

This reverts commit d830ae3f95756fbab1ca16c9a66fe73b5bb655ac.

4chan_x.user.js

@@ -1235,6 +1235,7 @@
         qr.replies[0].rm();
       }
       qr.status();
+      qr.resetFileInput();
       if ((spoiler = $.id('spoiler')).checked) spoiler.click();
       return qr.cleanError();
     },
@@ -1366,8 +1367,10 @@
         file = this.files[0];
         if (file.size > this.max) {
           qr.error('File too large.');
+          qr.resetFileInput();
         } else if (-1 === qr.mimeTypes.indexOf(file.type)) {
           qr.error('Unsupported file type.');
+          qr.resetFileInput();
         } else {
           qr.selected.setFile(file);
         }
@@ -1389,7 +1392,11 @@
           new qr.reply(file);
         }
       }
-      return $.addClass(qr.el, 'dump');
+      $.addClass(qr.el, 'dump');
+      if (this.multiple) return qr.resetFileInput();
+    },
+    resetFileInput: function() {
+      return $('[type=file]', qr.el).value = null;
     },
     replies: [],
     reply: (function() {
@@ -1464,6 +1471,7 @@
 
       _Class.prototype.rm = function() {
         var index, url;
+        qr.resetFileInput();
         $.rm(this.el);
         index = qr.replies.indexOf(this);
         if (qr.replies.length === 1) {
@@ -1568,7 +1576,7 @@
       });
       qr.mimeTypes = mimeTypes.split(', ');
       qr.spoiler = !!$('#com_submit + label');
-      qr.el = ui.dialog('qr', 'top:0;right:0;', "<div class=move>  Quick Reply <input type=checkbox name=autohide id=autohide title=Auto-hide>  <span>" + (g.REPLY ? '' : threads) + " <a class=close>x</a></span></div><form>  <div><input id=dump class=field type=button title='Dump mode' value=+><input name=name title=Name placeholder=Name class=field size=1><input name=email title=E-mail placeholder=E-mail class=field size=1><input name=sub title=Subject placeholder=Subject class=field size=1></div>  <output id=replies><div><a id=addReply href=javascript:;>+</a></div></output>  <div><textarea name=com title=Comment placeholder=Comment class=field></textarea></div>  <div class=captcha title=Reload><img></div>  <div><input name=captcha title=Verification class=field autocomplete=off size=1></div>  <div><label for=upfile><input type=button value='Select Files' class=button></label><span id=fileInfo></span><input type=submit class=button></div>  <label id=spoilerLabel" + (qr.spoiler ? '' : ' hidden') + "><input type=checkbox id=spoiler> Spoiler Image</label>  <div class=warning></div></form><input type=file id=upfile tabindex=-1 max=" + ($('[name=MAX_FILE_SIZE]').value) + " accept='" + mimeTypes + "' multiple>");
+      qr.el = ui.dialog('qr', 'top:0;right:0;', "<div class=move>  Quick Reply <input type=checkbox name=autohide id=autohide title=Auto-hide>  <span>" + (g.REPLY ? '' : threads) + " <a class=close>x</a></span></div><form>  <div><input id=dump class=field type=button title='Dump mode' value=+><input name=name title=Name placeholder=Name class=field size=1><input name=email title=E-mail placeholder=E-mail class=field size=1><input name=sub title=Subject placeholder=Subject class=field size=1></div>  <output id=replies><div><a id=addReply href=javascript:;>+</a></div></output>  <div><textarea name=com title=Comment placeholder=Comment class=field></textarea></div>  <div class=captcha title=Reload><img></div>  <div><input name=captcha title=Verification class=field autocomplete=off size=1></div>  <div><input type=file name=upfile max=" + ($('[name=MAX_FILE_SIZE]').value) + " accept='" + mimeTypes + "' multiple><input type=submit></div>  <label id=spoilerLabel" + (qr.spoiler ? '' : ' hidden') + "><input type=checkbox id=spoiler> Spoiler Image</label>  <div class=warning></div></form>");
       if (!g.REPLY) {
         $.on($('select', qr.el), 'mousedown', function(e) {
           return e.stopPropagation();
@@ -1586,7 +1594,7 @@
       $.on($('textarea', qr.el), 'change', function() {
         return qr.selected.el.lastChild.textContent = this.value;
       });
-      $.on($('#upfile', qr.el), 'change', qr.fileInput);
+      $.on($('[type=file]', qr.el), 'change', qr.fileInput);
       $.on($('#spoiler', qr.el), 'change', function() {
         return $('input', qr.selected.el).click();
       });
@@ -1734,10 +1742,11 @@
         qr.cooldown.set(/sage/i.test(reply.email) ? 60 : 30);
       }
       if (conf['Persistent QR'] || qr.cooldown.auto) {
-        return reply.rm();
+        reply.rm();
       } else {
-        return qr.close();
+        qr.close();
       }
+      return qr.resetFileInput();
     },
     message: {
       init: function() {
@@ -3651,24 +3660,12 @@ textarea.field {\
 .field[name=captcha] {\
   width: 100%;\
 }\
-#upfile {\
+#qr [type=file] {\
-  position: absolute;\
+  width: 75%;\
-  visibility: hidden;\
 }\
-#fileInfo {\
+#qr [type=submit] {\
-  box-sizing: border-box;\
-  -moz-box-sizing: border-box;\
-  display: inline-block;\
-  overflow: hidden;\
-  padding: 2px;\
-  text-overflow: ellipsis;\
-  white-space: nowrap;\
-  width: 40%;\
-}\
-.button {\
-  margin: 1px 0;\
   padding: 0 -moz-calc(1px); /* Gecko does not respect box-sizing: border-box */\
-  width: 30%;\
+  width: 25%;\
 }\
 \
 .new {\

script.coffee

@@ -889,6 +889,7 @@ qr =
     for i in qr.replies
       qr.replies[0].rm()
     qr.status()
+    qr.resetFileInput()
     spoiler.click() if (spoiler = $.id 'spoiler').checked
     qr.cleanError()
   hide: ->
@@ -1002,8 +1003,10 @@ qr =
       file = @files[0]
       if file.size > @max
         qr.error 'File too large.'
+        qr.resetFileInput()
       else if -1 is qr.mimeTypes.indexOf file.type
         qr.error 'Unsupported file type.'
+        qr.resetFileInput()
       else
         qr.selected.setFile file
       return
@@ -1020,6 +1023,9 @@ qr =
       else
         new qr.reply file
     $.addClass qr.el, 'dump'
+    qr.resetFileInput() if @multiple # reset input
+  resetFileInput: ->
+    $('[type=file]', qr.el).value = null
 
   replies: []
   reply: class
@@ -1072,6 +1078,7 @@ qr =
         $("[name=#{data}]", qr.el).value = @[data]
       $('#spoiler', qr.el).checked = @spoiler
     rm: ->
+      qr.resetFileInput()
       $.rm @el
       index = qr.replies.indexOf @
       if qr.replies.length is 1
@@ -1158,11 +1165,10 @@ qr =
   <div><textarea name=com title=Comment placeholder=Comment class=field></textarea></div>
   <div class=captcha title=Reload><img></div>
   <div><input name=captcha title=Verification class=field autocomplete=off size=1></div>
-  <div><label for=upfile><input type=button value='Select Files' class=button></label><span id=fileInfo></span><input type=submit class=button></div>
+  <div><input type=file name=upfile max=#{$('[name=MAX_FILE_SIZE]').value} accept='#{mimeTypes}' multiple><input type=submit></div>
   <label id=spoilerLabel#{if qr.spoiler then '' else ' hidden'}><input type=checkbox id=spoiler> Spoiler Image</label>
   <div class=warning></div>
-</form>
+</form>"
-<input type=file id=upfile tabindex=-1 max=#{$('[name=MAX_FILE_SIZE]').value} accept='#{mimeTypes}' multiple>"
     unless g.REPLY
       $.on $('select',    qr.el), 'mousedown', (e) -> e.stopPropagation()
     $.on $('#autohide',   qr.el), 'click',     qr.toggleHide
@@ -1171,7 +1177,7 @@ qr =
     $.on $('#addReply',   qr.el), 'click',     -> new qr.reply().select()
     $.on $('form',        qr.el), 'submit',    qr.submit
     $.on $('textarea',    qr.el), 'change',    -> qr.selected.el.lastChild.textContent = @value
-    $.on $('#upfile',     qr.el), 'change',    qr.fileInput
+    $.on $('[type=file]', qr.el), 'change',    qr.fileInput
     $.on $('#spoiler',    qr.el), 'change',    -> $('input', qr.selected.el).click()
 
     new qr.reply().select()
@@ -1319,6 +1325,7 @@ qr =
       reply.rm()
     else
       qr.close()
+    qr.resetFileInput()
 
   message:
     init: ->
@@ -2891,24 +2898,12 @@ textarea.field {
 .field[name=captcha] {
   width: 100%;
 }
-#upfile {
+#qr [type=file] {
-  position: absolute;
+  width: 75%;
-  visibility: hidden;
 }
-#fileInfo {
+#qr [type=submit] {
-  box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  display: inline-block;
-  overflow: hidden;
-  padding: 2px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 40%;
-}
-.button {
-  margin: 1px 0;
   padding: 0 -moz-calc(1px); /* Gecko does not respect box-sizing: border-box */
-  width: 30%;
+  width: 25%;
 }
 
 .new {