Replace usual file input by custom elements.

4chan_x.user.js

@@ -1235,7 +1235,6 @@
         qr.replies[0].rm();
       }
       qr.status();
-      qr.resetFileInput();
       if ((spoiler = $.id('spoiler')).checked) spoiler.click();
       return qr.cleanError();
     },
@@ -1367,10 +1366,8 @@
         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);
         }
@@ -1392,11 +1389,7 @@
           new qr.reply(file);
         }
       }
-      $.addClass(qr.el, 'dump');
+      return $.addClass(qr.el, 'dump');
-      if (this.multiple) return qr.resetFileInput();
-    },
-    resetFileInput: function() {
-      return $('[type=file]', qr.el).value = null;
     },
     replies: [],
     reply: (function() {
@@ -1471,7 +1464,6 @@
 
       _Class.prototype.rm = function() {
         var index, url;
-        qr.resetFileInput();
         $.rm(this.el);
         index = qr.replies.indexOf(this);
         if (qr.replies.length === 1) {
@@ -1576,7 +1568,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><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>");
+      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>");
       if (!g.REPLY) {
         $.on($('select', qr.el), 'mousedown', function(e) {
           return e.stopPropagation();
@@ -1594,7 +1586,7 @@
       $.on($('textarea', qr.el), 'change', function() {
         return qr.selected.el.lastChild.textContent = this.value;
       });
-      $.on($('[type=file]', qr.el), 'change', qr.fileInput);
+      $.on($('#upfile', qr.el), 'change', qr.fileInput);
       $.on($('#spoiler', qr.el), 'change', function() {
         return $('input', qr.selected.el).click();
       });
@@ -1741,11 +1733,10 @@
         qr.cooldown.set(/sage/i.test(reply.email) ? 60 : 30);
       }
       if (conf['Persistent QR'] || qr.cooldown.auto) {
-        reply.rm();
+        return reply.rm();
       } else {
-        qr.close();
+        return qr.close();
       }
-      return qr.resetFileInput();
     },
     message: {
       init: function() {
@@ -3659,12 +3650,24 @@ textarea.field {\
 .field[name=captcha] {\
   width: 100%;\
 }\
-#qr [type=file] {\
+#upfile {\
-  width: 75%;\
+  position: absolute;\
+  visibility: hidden;\
 }\
-#qr [type=submit] {\
+#fileInfo {\
+  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: 25%;\
+  width: 30%;\
 }\
 \
 .new {\

script.coffee

@@ -889,7 +889,6 @@ qr =
     for i in qr.replies
       qr.replies[0].rm()
     qr.status()
-    qr.resetFileInput()
     spoiler.click() if (spoiler = $.id 'spoiler').checked
     qr.cleanError()
   hide: ->
@@ -1003,10 +1002,8 @@ 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
@@ -1023,9 +1020,6 @@ 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
@@ -1078,7 +1072,6 @@ 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
@@ -1165,10 +1158,11 @@ 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><input type=file name=upfile max=#{$('[name=MAX_FILE_SIZE]').value} accept='#{mimeTypes}' multiple><input type=submit></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#{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
@@ -1177,7 +1171,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 $('[type=file]', qr.el), 'change',    qr.fileInput
+    $.on $('#upfile',     qr.el), 'change',    qr.fileInput
     $.on $('#spoiler',    qr.el), 'change',    -> $('input', qr.selected.el).click()
 
     new qr.reply().select()
@@ -1324,7 +1318,6 @@ qr =
       reply.rm()
     else
       qr.close()
-    qr.resetFileInput()
 
   message:
     init: ->
@@ -2897,12 +2890,24 @@ textarea.field {
 .field[name=captcha] {
   width: 100%;
 }
-#qr [type=file] {
+#upfile {
-  width: 75%;
+  position: absolute;
+  visibility: hidden;
 }
-#qr [type=submit] {
+#fileInfo {
+  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: 25%;
+  width: 30%;
 }
 
 .new {