add multiple files

This commit is contained in:
James Campos 2011-09-05 13:03:55 -07:00
parent b4bf4037c6
commit 86f08d491a
2 changed files with 56 additions and 40 deletions

View File

@ -1248,7 +1248,7 @@
return 'image/' + type; return 'image/' + type;
} }
}); });
QR.file = "<input type=file name=upfile accept='" + accept + "'>"; QR.file = "<input type=file name=upfile accept='" + accept + "'><img alt='click here'>";
QR.MAX_FILE_SIZE = $('input[name=MAX_FILE_SIZE]').value; QR.MAX_FILE_SIZE = $('input[name=MAX_FILE_SIZE]').value;
QR.spoiler = $('.postarea label') ? ' <label>[<input type=checkbox name=spoiler>Spoiler Image?]</label>' : ''; QR.spoiler = $('.postarea label') ? ' <label>[<input type=checkbox name=spoiler>Spoiler Image?]</label>' : '';
if (conf['Persistent QR']) { if (conf['Persistent QR']) {
@ -1259,6 +1259,20 @@
} }
} }
}, },
foo: function() {
var div, file, files;
files = $('#files', QR.qr);
div = $.el('div', {
innerHTML: QR.file
});
file = $('input', div);
$.bind(file, 'change', QR.change);
$.bind($('img', div), 'click', function() {
return this.previousSibling.click();
});
$.add(files, div);
return file.click();
},
attach: function() { attach: function() {
var div, file; var div, file;
$('#auto', QR.qr).checked = true; $('#auto', QR.qr).checked = true;
@ -1328,27 +1342,21 @@
return $('#cl', QR.qr).textContent = captchas.length + ' captchas'; return $('#cl', QR.qr).textContent = captchas.length + ' captchas';
}, },
change: function(e) { change: function(e) {
var file, fr; var file, fr, img, qr;
file = this.files[0]; file = this.files[0];
if (file.size > QR.MAX_FILE_SIZE) { if (file.size > QR.MAX_FILE_SIZE) {
alert('Error: File too large.'); alert('Error: File too large.');
QR.resetFile(this); $.rm(this.parentNode);
return $('[type=file]', QR.qr).click(); QR.foo();
} else {
fr = new FileReader();
fr.onload = function(e) {
var img;
img = $.el('img', {
src: e.target.result
});
return $.add($('#thumbs', QR.qr), img);
};
fr.readAsDataURL(file);
return; return;
if (this === $('#files div:last-of-type input', QR.qr)) {
return QR.attach();
}
} }
qr = QR.qr;
fr = new FileReader();
img = this.nextSibling;
fr.onload = function(e) {
return img.src = e.target.result;
};
return fr.readAsDataURL(file);
}, },
close: function() { close: function() {
$.rm(QR.qr); $.rm(QR.qr);
@ -1390,7 +1398,7 @@
QR.qr = qr = ui.dialog('qr', { QR.qr = qr = ui.dialog('qr', {
top: '0', top: '0',
left: '0' left: '0'
}, " <a class=close>X</a> <input type=checkbox id=autohide title=autohide> <div class=move> <span class=click> <button>File</button> <span><input form=qr_form placeholder=Subject name=sub><span>Subject</span></span> <span><input form=qr_form placeholder=Name name=name><span>Name</span></span> <span><input form=qr_form placeholder=Email name=email><span>Email</span></span> <span><input form=qr_form placeholder=Password name=pwd type=password><span>Password</span></span> </span> </div> <form enctype=multipart/form-data method=post action=http://sys.4chan.org/" + g.BOARD + "/post target=iframe id=qr_form> <div hidden> <input name=resto value=" + tid + "> <input name=mode value=regist> <input name=recaptcha_challenge_field id=challenge> <input name=recaptcha_response_field id=response> <input type=file name=upfile> </div> <textarea placeholder=Comment name=com></textarea> <div id=thumbs></div> <div id=captcha> <div><img></div> <span id=cl>120 Captchas</span> <input id=recaptcha_response_field> </div> <div> <button>Submit</button> <label>[<input type=checkbox id=autopost title=autopost> Autopost]</label> " + QR.spoiler + " </div> <a class=error>Derp</span> </form> "); }, " <a class=close>X</a> <input type=checkbox id=autohide title=autohide> <div class=move> <span class=click> <button>File</button> <span><input form=qr_form placeholder=Subject name=sub><span>Subject</span></span> <span><input form=qr_form placeholder=Name name=name><span>Name</span></span> <span><input form=qr_form placeholder=Email name=email><span>Email</span></span> <span><input form=qr_form placeholder=Password name=pwd type=password><span>Password</span></span> </span> </div> <form enctype=multipart/form-data method=post action=http://sys.4chan.org/" + g.BOARD + "/post target=iframe id=qr_form> <div hidden> <input name=resto value=" + tid + "> <input name=mode value=regist> <input name=recaptcha_challenge_field id=challenge> <input name=recaptcha_response_field id=response> </div> <textarea placeholder=Comment name=com></textarea> <div id=files></div> <div id=captcha> <div><img></div> <span id=cl>120 Captchas</span> <input id=recaptcha_response_field> </div> <div> <button>Submit</button> <label>[<input type=checkbox id=autopost title=autopost> Autopost]</label> " + QR.spoiler + " </div> <a class=error>Derp</span> </form> ");
c = d.cookie; c = d.cookie;
$('[name=name]', qr).value = (m = c.match(/4chan_name=([^;]+)/)) ? decodeURIComponent(m[1]) : ''; $('[name=name]', qr).value = (m = c.match(/4chan_name=([^;]+)/)) ? decodeURIComponent(m[1]) : '';
$('[name=email]', qr).value = (m = c.match(/4chan_email=([^;]+)/)) ? decodeURIComponent(m[1]) : ''; $('[name=email]', qr).value = (m = c.match(/4chan_email=([^;]+)/)) ? decodeURIComponent(m[1]) : '';
@ -1399,10 +1407,7 @@
if (conf['Cooldown']) { if (conf['Cooldown']) {
QR.cooldown(); QR.cooldown();
} }
$.bind($('button', qr), 'click', function() { $.bind($('button', qr), 'click', QR.foo);
return $('[type=file]', qr).click();
});
$.bind($('[type=file]', qr), 'change', QR.change);
$.bind($('.close', qr), 'click', QR.close); $.bind($('.close', qr), 'click', QR.close);
$.bind($('.click', qr), 'mousedown', function(e) { $.bind($('.click', qr), 'mousedown', function(e) {
return e.stopPropagation(); return e.stopPropagation();
@ -3487,7 +3492,10 @@
display: inline;\ display: inline;\
width: 100%;\ width: 100%;\
}\ }\
#qr #thumbs img {\ #qr #files input {\
display: none;\
}\
#qr #files img {\
display: block;\ display: block;\
max-height: 250px;\ max-height: 250px;\
max-width: 250px;\ max-width: 250px;\

View File

@ -980,7 +980,7 @@ QR =
'application/' + type 'application/' + type
else else
'image/' + type 'image/' + type
QR.file = "<input type=file name=upfile accept='#{accept}'>" QR.file = "<input type=file name=upfile accept='#{accept}'><img alt='click here'>"
QR.MAX_FILE_SIZE = $('input[name=MAX_FILE_SIZE]').value QR.MAX_FILE_SIZE = $('input[name=MAX_FILE_SIZE]').value
QR.spoiler = if $('.postarea label') then ' <label>[<input type=checkbox name=spoiler>Spoiler Image?]</label>' else '' QR.spoiler = if $('.postarea label') then ' <label>[<input type=checkbox name=spoiler>Spoiler Image?]</label>' else ''
if conf['Persistent QR'] if conf['Persistent QR']
@ -988,6 +988,15 @@ QR =
$('textarea', QR.qr).blur() $('textarea', QR.qr).blur()
if conf['Auto Hide QR'] if conf['Auto Hide QR']
$('#autohide', QR.qr).checked = true $('#autohide', QR.qr).checked = true
foo: ->
files = $ '#files', QR.qr
div = $.el 'div',
innerHTML: QR.file
file = $ 'input', div
$.bind file, 'change', QR.change
$.bind $('img', div), 'click', -> @previousSibling.click()
$.add files, div
file.click()
attach: -> attach: ->
$('#auto', QR.qr).checked = true $('#auto', QR.qr).checked = true
div = $.el 'div', div = $.el 'div',
@ -1039,18 +1048,15 @@ QR =
file = @files[0] file = @files[0]
if file.size > QR.MAX_FILE_SIZE if file.size > QR.MAX_FILE_SIZE
alert 'Error: File too large.' alert 'Error: File too large.'
QR.resetFile @ $.rm @parentNode
$('[type=file]', QR.qr).click() QR.foo()
else
fr = new FileReader()
fr.onload = (e) ->
img = $.el 'img',
src: e.target.result
$.add $('#thumbs', QR.qr), img
fr.readAsDataURL file
return return
if @ is $('#files div:last-of-type input', QR.qr) {qr} = QR
QR.attach() fr = new FileReader()
img = @nextSibling
fr.onload = (e) ->
img.src = e.target.result
fr.readAsDataURL file
close: -> close: ->
$.rm QR.qr $.rm QR.qr
QR.qr = null QR.qr = null
@ -1089,10 +1095,9 @@ QR =
<input name=mode value=regist> <input name=mode value=regist>
<input name=recaptcha_challenge_field id=challenge> <input name=recaptcha_challenge_field id=challenge>
<input name=recaptcha_response_field id=response> <input name=recaptcha_response_field id=response>
<input type=file name=upfile>
</div> </div>
<textarea placeholder=Comment name=com></textarea> <textarea placeholder=Comment name=com></textarea>
<div id=thumbs></div> <div id=files></div>
<div id=captcha> <div id=captcha>
<div><img></div> <div><img></div>
<span id=cl>120 Captchas</span> <span id=cl>120 Captchas</span>
@ -1114,8 +1119,8 @@ QR =
$('[name=pwd]', qr).value = if m = c.match(/4chan_pass=([^;]+)/) then decodeURIComponent m[1] else $('input[name=pwd]').value $('[name=pwd]', qr).value = if m = c.match(/4chan_pass=([^;]+)/) then decodeURIComponent m[1] else $('input[name=pwd]').value
$('textarea', qr).value = text $('textarea', qr).value = text
QR.cooldown() if conf['Cooldown'] QR.cooldown() if conf['Cooldown']
$.bind $('button', qr), 'click', -> $('[type=file]', qr).click() $.bind $('button', qr), 'click', QR.foo
$.bind $('[type=file]', qr), 'change', QR.change #$.bind $('[type=file]', qr), 'change', QR.change
$.bind $('.close', qr), 'click', QR.close $.bind $('.close', qr), 'click', QR.close
$.bind $('.click', qr), 'mousedown', (e) -> e.stopPropagation() $.bind $('.click', qr), 'mousedown', (e) -> e.stopPropagation()
$.bind $('form', qr), 'submit', QR.submit $.bind $('form', qr), 'submit', QR.submit
@ -2795,7 +2800,10 @@ main =
display: inline; display: inline;
width: 100%; width: 100%;
} }
#qr #thumbs img { #qr #files input {
display: none;
}
#qr #files img {
display: block; display: block;
max-height: 250px; max-height: 250px;
max-width: 250px; max-width: 250px;