31:T8a6,{ iframeTarget; /** * I set up the listeners for dragging and dropping as well * as creating an iFrame for holding dragged in images * @returns {undefined} */ function main() { // The div that receives drops and the new iFrame var targetDiv = document.getElementById("dropTarget"), iframe = document.createElement("iframe"); // Set the iframe to a blank page iframe.src = "about:blank"; // Append it to the target document.getElementById("iframeTarget").appendChild(iframe); // Drag over is when an object is hovering over the div // e.preventDefault keeps the page from changing targetDiv.addEventListener("dragover", function (e) { e.preventDefault(); this.className = "dropMe"; }, false); // Drag leave is when the object leaves the div but isn't dropped targetDiv.addEventListener("dragleave", function (e) { e.preventDefault(); this.className = "dropEnabled"; }, false); // Drop is when the click is released targetDiv.addEventListener("drop", function (e) { e.preventDefault(); this.className = "dropEnabled"; loadFile(e.dataTransfer.files[0], iframe); }, false); document.getElementById("upload").addEventListener("click", function () { var file = document.getElementById("browsedFile").files[0]; loadFile(file, iframe); }, false); } /** * Load a file and then put it on an ifrmae * @param {Element} f The file that needs to get loaded * @param {Element} destination The iframe that the file is appended to * @returns {undefined} */ function loadFile(f, destination) { // Make a file reader to interpret the file var reader = new FileReader(); // When the reader is done reading, // Make a new image tag and append it to the iFrame reader.onload = function (event) { var newImage = document.createElement("img"); newImage.src = event.target.result; destination.contentWindow.document.getElementsByTagName("body")[0].appendChild(newImage); }; // Tell the reader to start reading asynchrounously reader.readAsDataURL(f); } // Run the main script //window.onload = main; main(); }32:[] 2f:{"title":"Image Upload Tool in Native JavaScript","cells":[{"id":0,"value":"md`# Image Upload Tool in Native JavaScript`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"md`\nThis notebook ports a [file upload tool by Stephen Killingsworth](http://jsfiddle.net/zero298/kWLcx/) to Observable.\n\nI found Stephen's [JSFiddle](http://jsfiddle.net/zero298/kWLcx/) example researching how JavaScript uploads work in order to fix my [piexifjs canvas sample notebook](https://beta.observablehq.com/@aaronkyle/piexifjs-canvas-sample).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"md`\nThanks to [@Fil](https://observablehq.com/@fil) for the [suggestions and fixes](https://observablehq.com/compare/68e0e852683ddc02@36...d1cc50875092db01@36)!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"stylesheet = html`\n