Skip to content

Instantly share code, notes, and snippets.

@Tithen-Firion
Last active August 17, 2017 23:10
Show Gist options
  • Save Tithen-Firion/45a78b031223bf6ec0911ff0fd32a6aa to your computer and use it in GitHub Desktop.
Save Tithen-Firion/45a78b031223bf6ec0911ff0fd32a6aa to your computer and use it in GitHub Desktop.
Steam showcase uploader. Upload long artworks/screenshots on "edit profile" page directly to showcase by choosing file or with drag and drop.
javascript:(function(){function%20a(a){if(!a.firstElementChild.hasAttribute("data-initiated")){a.firstElementChild.setAttribute("data-initiated",1);var%20b=a.getAttribute("data-eshowcasetype");[].forEach.call(a.querySelectorAll(".screenshot_showcase_primary,%20.screenshot_showcase_smallscreenshot.showcase_slot"),function(a){a.setAttribute("data-eshowcasetype",b),0==a.clientHeight&&(a.style.minHeight="300px"),a.addEventListener("click",c,!0),a.addEventListener("dragover",d,!0),a.addEventListener("dragleave",e,!1),a.addEventListener("drop",e,!0),a.classList.contains("openslot")||a.classList.add("not-open")})}}function%20b(b,c){var%20d=b[0].target;a(d)}function%20c(a){a.preventDefault(),a.stopPropagation(),k.parentNode&&k.parentNode.removeChild(k),k.target=this,k.click()}function%20d(a){k.parentNode!==this&&(k.target=this,this.insertBefore(k,this.firstChild)),this.classList.add("dragover")}function%20e(a){this.classList.remove("dragover")}function%20f(){this.parentNode&&this.parentNode.removeChild(this);var%20a=this.cloneNode(!0);a.files=this.files;var%20b=this.target.getAttribute("data-eshowcasetype"),c=JSON.parse(this.target.getAttribute("data-slotjson")),d=c.slot;if(a.files&&a.files[0]){var%20e=a.files[0],f=e.name.lastIndexOf("."),h=e.name.substring(f+1).toLowerCase();if(["jpg","png","gif","jpeg"].indexOf(h)<0)return%20void%20alert("You%20can%20only%20upload%20JPG,%20PNG%20and%20GIF%20files.");if(e.size>10485760)return%20void%20alert("You%20can%20only%20upload%20files%20less%20than%2010%20MB%20in%20file%20size.");g(d,b,a,f)}else%20alert("No%20file%20selected.")}function%20g(a,b,c,d){var%20e=c.files[0],f=new%20FileReader;f.addEventListener("load",function(){var%20g=new%20Image;g.addEventListener("load",function(){window.clearTimeout(i);var%20f=g.width,j=g.height,k=window.prompt("Enter%20title",e.name.substring(0,d)),l=window.open("/sharedfiles/edititem/767/3/","","width=,height=,resizable=no");l?(l.resizeTo(0,0),l.onload=function(){h(l,k,a,b,c,f,j)}):alert("Allow%20popups%20first!")});var%20i=window.setTimeout(function(){alert("That's%20not%20an%20image!")},500);g.src=f.result}),f.readAsDataURL(e)}function%20h(a,b,c,d,e,f,g){a.document.body.appendChild(l);var%20h=a.document.getElementsByName("file")[0];h.parentNode.replaceChild(e,h);var%20j={13:3,7:5}[d];a.document.getElementsByName("title")[0].value=b,a.document.getElementsByName("agree_terms")[0].checked=!0,0==c&&506==f&&g>506||c>0&&c<4&&100==f&&g>80?(a.document.getElementsByName("image_width")[0].value=1e3,a.document.getElementsByName("image_height")[0].value=1):(a.document.getElementsByName("image_width")[0].value=f,a.document.getElementsByName("image_height")[0].value=g),a.document.getElementsByName("file_type")[0].value=j,a.document.getElementsByName("cloudfilenameprefix")[0].value=Math.trunc(Date.now()/1e3)+"_",a.document.getElementById("Visibility0").checked=!0,a.onunload=function(){function%20b(){a.location.search.indexOf("fileuploadsuccess")>-1&&(window.clearInterval(e),i(a,c,d))}var%20e=window.setInterval(b,50)},a.document.getElementById("SubmitItemForm").submit()}function%20i(a,b,c){var%20d=a.location.search;if(a.close(),d.indexOf("id=")==-1)return%20alert("Some%20error%20occured.%20Post%20your%20browser,%20file%20you%20wanted%20to%20upload%20and%20code%20below%20to%20author%20of%20this%20script.\n"+d),void%20a.close();var%20e=d.match(/id=(\d+)/)[1];j.push({scType:c,slot:b,id:e,running:!1})}window.setInterval(function(){if(j.length){var%20a=j[0];if(a.running){var%20b='div[data-eshowcasetype="'+a.scType+'"]%20.screenshot_showcase_'+(0==a.slot?"primary":"smallscreenshot:nth-child("+a.slot+")"),c=JSON.parse(document.querySelector(b).getAttribute("data-slotjson"));c.publishedfileid==a.id&&j.shift()}else%20a.running=!0,PreviewShowcaseConfigWithSlotChange(a.scType,a.slot,{publishedfileid:a.id})}},200);var%20j=[];window.setTimeout(function(){var%20a=window.open("/?CLOSE_ME","","width=300,height=");a?a.close():alert("Allow%20popups!")},1);var%20k=document.createElement("input");k.type="file",k.name="file",k.style.opacity=0,k.style.position="absolute",k.style.width="100%",k.style.height="100%",k.style.zIndex="9999",k.style.top=0,k.style.left=0,k.setAttribute("multiple",""),k.addEventListener("change",f,!1);var%20l=document.createElement("div");l.style.position="fixed",l.style.top=0,l.style.left=0,l.style.width="100%",l.style.height="100%",l.style.background="black%20url('http://steamcommunity-a.akamaihd.net/public/images/login/throbber.gif')%20center%20no-repeat",l.style.zIndex=9999999;var%20m=document.createElement("style");m.innerHTML=".not-open:hover,.dragover{border-color:#FFFFFF%20!important}.not-open{border:2px%20dashed%20#5491CF;border-radius:5px;margin:-2px}.not-open.screenshot_showcase_smallscreenshot{margin-bottom:9px}",document.head.appendChild(m),[].forEach.call(document.querySelectorAll("#showcase_preview_13,%20#showcase_preview_7"),function(c){a(c);var%20d=new%20MutationObserver(b);d.observe(c,{childList:!0})})})();
// add listeners to showcase items
function init(parentNode) {
if(parentNode.firstElementChild.hasAttribute("data-initiated"))
return;
parentNode.firstElementChild.setAttribute("data-initiated", 1);
var showCaseType = parentNode.getAttribute("data-eshowcasetype");
[].forEach.call(parentNode.querySelectorAll(".screenshot_showcase_primary, .screenshot_showcase_smallscreenshot.showcase_slot"), function(el) {
el.setAttribute("data-eshowcasetype", showCaseType);
if(el.clientHeight == 0)
el.style.minHeight = "300px";
el.addEventListener("click", clickFileInput, true);
el.addEventListener("dragover", dragover, true);
el.addEventListener("dragleave", dragleave, false);
el.addEventListener("drop", dragleave, true);
if(!el.classList.contains("openslot"))
el.classList.add("not-open");
});
}
// after image is selected in showcase we must reinitiate script for this showcase
function observerFunc(mutations, observer) {
var target = mutations[0].target;
init(target);
}
// block default "click" action on showcase item and redirect click to file input
function clickFileInput(e) {
e.preventDefault();
e.stopPropagation();
if(fileInput.parentNode)
fileInput.parentNode.removeChild(fileInput);
fileInput.target = this;
fileInput.click();
}
// move file input under mouse and add border
function dragover(e) {
if(fileInput.parentNode !== this) {
fileInput.target = this;
this.insertBefore(fileInput, this.firstChild);
}
this.classList.add("dragover");
}
// remove border
function dragleave(e) {
this.classList.remove("dragover");
}
// fired on input file "change"; test file size and extension
function uploadFile() {
if(this.parentNode)
this.parentNode.removeChild(this);
var clonedFileInput = this.cloneNode(true);
clonedFileInput.files = this.files;
var showCaseType = this.target.getAttribute("data-eshowcasetype");
var jsonSlot = JSON.parse(this.target.getAttribute("data-slotjson"));
var slot = jsonSlot["slot"];
if(clonedFileInput.files && clonedFileInput.files[0]) {
var file = clonedFileInput.files[0];
var dot = file.name.lastIndexOf(".");
var ext = file.name.substring(dot + 1).toLowerCase();
if(["jpg", "png", "gif", "jpeg"].indexOf(ext) < 0) {
alert("You can only upload JPG, PNG and GIF files.")
return;
}
if(file.size > 10485760) {
alert("You can only upload files less than 10 MB in file size.")
return;
}
uploadFileStep1(slot, showCaseType, clonedFileInput, dot);
} else
alert("No file selected.");
}
// get width and height and open upload popup
function uploadFileStep1(slot, showCaseType, clonedFileInput, dot) {
var file = clonedFileInput.files[0];
var reader = new FileReader();
reader.addEventListener("load", function() {
var img = new Image();
img.addEventListener("load", function() {
window.clearTimeout(timeout);
var width = img.width;
var height = img.height;
var title = window.prompt("Enter title", file.name.substring(0, dot));
var upl = window.open("/sharedfiles/edititem/767/3/", "", "width=,height=,resizable=no");
if(upl) {
upl.resizeTo(0, 0);
upl.onload = function() {
uploadFileStep2(upl, title, slot, showCaseType, clonedFileInput, width, height);
}
} else
alert("Allow popups first!");
});
var timeout = window.setTimeout(function() {
alert("That's not an image!");
}, 500);
img.src = reader.result;
});
reader.readAsDataURL(file);
}
// set proper values and start upload
function uploadFileStep2(upl, title, slot, showCaseType, clonedFileInput, width, height) {
upl.document.body.appendChild(loading);
var f = upl.document.getElementsByName("file")[0];
f.parentNode.replaceChild(clonedFileInput, f);
var fileType = {"13": 3, "7": 5}[showCaseType];
upl.document.getElementsByName("title")[0].value = title;
upl.document.getElementsByName("agree_terms")[0].checked = true;
if((slot == 0 && width == 506 && height > 506) || (slot > 0 && slot < 4 && width == 100 && height > 80)) {
upl.document.getElementsByName("image_width")[0].value = 1000;
upl.document.getElementsByName("image_height")[0].value = 1;
} else {
upl.document.getElementsByName("image_width")[0].value = width;
upl.document.getElementsByName("image_height")[0].value = height;
}
upl.document.getElementsByName("file_type")[0].value = fileType;
upl.document.getElementsByName("cloudfilenameprefix")[0].value = Math.trunc(Date.now() / 1000) + "_";
upl.document.getElementById("Visibility0").checked = true;
upl.onunload = function() {
function testUrl() {
if(upl.location.search.indexOf("fileuploadsuccess") > -1) {
window.clearInterval(interval);
uploadFileStep3(upl, slot, showCaseType);
}
}
var interval = window.setInterval(testUrl, 50);
}
upl.document.getElementById("SubmitItemForm").submit();
}
// wait for upload and choose uploaded image
function uploadFileStep3(upl, slot, showCaseType) {
var urlSearch = upl.location.search;
upl.close();
if(urlSearch.indexOf("id=") == -1) {
alert("Some error occured. Post your browser, file you wanted to upload and code below to author of this script.\n" + urlSearch)
upl.close();
return;
}
var publishedId = urlSearch.match(/id=(\d+)/)[1];
queue.push({scType: showCaseType, slot: slot, id: publishedId, running: false});
}
// simple queue
window.setInterval(function() {
if(queue.length) {
var j = queue[0];
if(j.running) {
var selector = 'div[data-eshowcasetype="' + j.scType + '"] .screenshot_showcase_' +
(j.slot == 0 ? "primary" : "smallscreenshot:nth-child(" + j.slot + ")");
var jsonData = JSON.parse(document.querySelector(selector).getAttribute("data-slotjson"));
if(jsonData.publishedfileid == j.id) {
queue.shift();
}
} else {
j.running = true;
PreviewShowcaseConfigWithSlotChange(j.scType, j.slot, { publishedfileid: j.id });
}
}
}, 200);
var queue = [];
// test for popups
// timeout because without it browsers opened and closed window even when blocking popups
window.setTimeout(function() {
var t = window.open("/?CLOSE_ME", "", "width=300,height=");
if(t)
t.close()
else
alert("Allow popups!");
}, 1);
// file you choose/drop ends here, and then is cloned to upload window
var fileInput = document.createElement("input");
fileInput.type = "file";
fileInput.name = "file";
fileInput.style.opacity = 0;
fileInput.style.position = "absolute";
fileInput.style.width = "100%";
fileInput.style.height = "100%";
fileInput.style.zIndex = "9999";
fileInput.style.top = 0;
fileInput.style.left = 0;
fileInput.setAttribute("multiple", "");
fileInput.addEventListener("change", uploadFile, false);
// cosmetics, inserted in popup
var loading = document.createElement("div");
loading.style.position = "fixed";
loading.style.top = 0;
loading.style.left = 0;
loading.style.width = "100%";
loading.style.height = "100%";
loading.style.background = "black url('http://steamcommunity-a.akamaihd.net/public/images/login/throbber.gif') center no-repeat";
loading.style.zIndex = 9999999;
// cosmetics too
var style = document.createElement("style");
style.innerHTML = ".not-open:hover,.dragover{border-color:#FFFFFF !important}" +
".not-open{border:2px dashed #5491CF;border-radius:5px;margin:-2px}" +
".not-open.screenshot_showcase_smallscreenshot{margin-bottom:9px}";
document.head.appendChild(style);
// initialization
[].forEach.call(document.querySelectorAll("#showcase_preview_13, #showcase_preview_7"), function(el) {
init(el);
var observer = new MutationObserver(observerFunc);
observer.observe(el, { childList: true });
});
@nekomeowww
Copy link

seems the long picture uploader has an error, same as another way of uploading the right side long picture.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment