Skip to content

Instantly share code, notes, and snippets.

@jadeallencook
Created July 23, 2022 04:13
Show Gist options
  • Save jadeallencook/5447d921321c4ef604e9d51c396e2c31 to your computer and use it in GitHub Desktop.
Save jadeallencook/5447d921321c4ef604e9d51c396e2c31 to your computer and use it in GitHub Desktop.
preview image post on your instagram feed
const insert = (type, result) => {
const base64 = `data:${type};base64,${btoa(result)}`;
const rows = document.querySelectorAll('div._ac7v');
let images;
let clone = document.querySelector('div._ac7v > div._aabd').cloneNode();
clone.innerHTML = '';
clone.style.background = `url(${base64})`;
clone.style.backgroundPosition = 'center center';
clone.style.backgroundSize = 'cover';
for (let row of rows) {
row.prepend(clone);
images = row.querySelectorAll('div._aabd');
clone = images[images.length - 1];
clone.remove();
}
hasPreview = true;
}
const update = (type, result) => {
const base64 = `data:${type};base64,${btoa(result)}`;
const elem = document.querySelector('div._ac7v > div._aabd');
elem.style.background = `url(${base64})`;
elem.style.backgroundPosition = 'center center';
elem.style.backgroundSize = 'cover';
}
const handler = event => {
const { files } = event.srcElement;
const file = files[0];
const reader = new FileReader();
reader.readAsBinaryString(file);
reader.onload = (event) => !hasPreview ?
insert(file.type, event.target.result) :
update(file.type, event.target.result);
}
const menu = document.querySelector('div._aa-g._ac_s');
const tab = document.createElement('input');
let hasPreview = false;
tab.setAttribute('type', 'file');
tab.onchange = handler;
menu.appendChild(tab);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment