2d:null 2e:["$","title",null,{"children":"Image Upload Tool in Native JavaScript | Aaron Kyle Dennis | Observable"}] 33: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(); }34:[] 31:{"id":"68e0e852683ddc02","slug":"image-upload-tool-in-vanilla-javascript","title":"Image Upload Tool in Native JavaScript","thumbnail":"9b6eecefd538b35d4887e6a6ded604a3fdc2ffccd89ad48a40be7ba423183a02","access_level":"public","create_time":"$D2018-05-05T13:01:45.127Z","update_time":"$D2019-08-27T14:53:27.489Z","view_time":null,"first_public_time":"$D2018-05-05T13:15:20.663Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"8d652a601386fcf4","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":"starter_2024"},"version":40,"publish_version":40,"role":null,"authored":false,"authors":[{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}],"members":[{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"63becdb427ae4c93","slug":"learning-by-doing","title":"Learning By Doing","owner":{"id":"8d652a601386fcf4","login":"aaronkyle","name":"Aaron Kyle Dennis"}},"type":"notebook","body":{"title":"Image Upload Tool in Native JavaScript","cells":[{"id":0,"value":"md`# Image Upload Tool in Native JavaScript`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"stylesheet = html`\n