Skip to content

Instantly share code, notes, and snippets.

@fredley
Created March 4, 2015 18:56
Show Gist options
  • Save fredley/f130e8628c1d61c7b5a2 to your computer and use it in GitHub Desktop.
Save fredley/f130e8628c1d61c7b5a2 to your computer and use it in GitHub Desktop.
Drag+Drop image uploader for SE chat
// ==UserScript==
// @name Chat Image Upload
// @description Drag and Drop upload images
// @author fredley
// @version 1.0.0
// @include *://chat.meta.stackoverflow.com/rooms/*
// @include *://chat.meta.stackexchange.com/rooms/*
// @include *://chat.stackexchange.com/rooms/*
// @include *://chat.stackoverflow.com/rooms/*
// @include *://chat.askubuntu.com/rooms/*
// @include *://chat.serverfault.com/rooms/*
// @run-at document-end
// ==/UserScript==
function inject() {
for (var i = 0; i < arguments.length; ++i) {
if (typeof(arguments[i]) == 'function') {
var script = document.createElement('script');
script.type = 'text/javascript';
script.textContent = '(' + arguments[i].toString() + ')(jQuery)';
document.body.appendChild(script);
}
}
}
inject(function ($) {
$(document).ready(function() {
$('body').append('<div id="dropper"><h1>Upload image!</h1></div>');
$('body').append('<style>#dropper{display:none;position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:9999;}#dropper h1{text-align:center;padding-top:200px;position:absolute;width:100%;color:#FFF;font-size:450%;font-weight:bold;font-family:Helvetica;}</style>');
$('body').on({
dragenter: function(e){
$('#dropper').show();
e.preventDefault();
e.stopPropagation();
},
dragover: function(e){
$('#dropper').show();
e.preventDefault();
e.stopPropagation();
},
dragend: function(e){
$('#dropper').hide();
e.preventDefault();
e.stopPropagation();
},
drop: function(e){
$('#dropper').hide();
if(e.originalEvent.dataTransfer && e.originalEvent.dataTransfer.files.length) {
console.log('upload!');
e.preventDefault();
e.stopPropagation();
var files = e.originalEvent.dataTransfer.files;
initFileUpload().showDialog(function(a){
$('#input').val($('#input').val() + a);
$('#input').focus();
});
setTimeout(function(){
$('#filename-input').prop("files", files);
setTimeout(function(){
$('input[value="upload"]').click();
},20);
},20);
}
}});
$('#dropper').on('click',function(e){
$(this).hide();
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment