2f:T571,{ // dz is the name we gave the HTML cell with the drop zone. dz.addEventListener('drop', (ev)=>{ console.log('File(s) dropped'); // Prevent default behavior (Prevent file from being opened) ev.preventDefault(); if (ev.dataTransfer.items) { // Use DataTransferItemList interface to access the file(s) for (var i = 0; i < ev.dataTransfer.items.length; i++) { // If dropped items aren't files, reject them if (ev.dataTransfer.items[i].kind === 'file') { var file = ev.dataTransfer.items[i].getAsFile(); console.log('... file[' + i + '].name = ' + file.name); //console.log('text of the file:', file.text()) file.text().then((text)=> { console.log("file text:", text); // try dropping a JSON file mutable tableArr = JSON.parse(text)} ) } } } else { // Use DataTransfer interface to access the file(s) for (var i = 0; i < ev.dataTransfer.files.length; i++) { console.log('... file[' + i + '].name = ' + ev.dataTransfer.files[i].name); } } }) dz.addEventListener('dragover', (ev)=> { console.log('File(s) in drop zone'); // Prevent default behavior (Prevent file from being opened) ev.preventDefault(); }) console.log(Date.now()) dz.addEventListener('mouseover', (ev)=> { console.log('mouseover') }) }30:[{"id":"9549928dec9d1308a4952c4a61b6fe701d0437b2c0f99d0ec9b15cf45b8d6d5e39469f8a4fc88d89b6af6300197b06a41c3beb08c15e17795626f851545052ec","href":"https://static.observableusercontent.com/files/9549928dec9d1308a4952c4a61b6fe701d0437b2c0f99d0ec9b15cf45b8d6d5e39469f8a4fc88d89b6af6300197b06a41c3beb08c15e17795626f851545052ec","name":"chrome_24HYOXmunE.png","type":"image/png","lastModified":1685993285473.386,"size":8125}] 2d:{"title":"Loading a File via Drag and Drop in Observable","cells":[{"id":0,"value":"# Loading a File via Drag and Drop in Observable","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"You can already upload files into an Observable Notebook via the right hand icons. But let's say you are trying to build a tool for the web that is independent of any site, and you want to be able to drag and drop some file into the app to load content. The web can handle this for you!\n\nThis notebook complements my [How to convert a markdown list into json](https://observablehq.com/@triptych/how-to-convert-a-markdown-list-to-json)\nAnd implements the [\"fixed flat table\" strategy](https://observablehq.com/@triptych/how-to-get-around-flat-array-issue-in-observable-tables).\n\nTIP: go create a JSON file from the first notebook above ( converting a markdown list ) and come back here and drag and drop it on the drop area.","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"A handy reference for you: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"## 1. Define a Drop Zone","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"

\nDrag one or more files on to this drop zone\n

\n","pinned":false,"hidden":false,"mode":"html"},{"id":71,"value":"What is this","pinned":false,"hidden":false,"mode":"html"},{"id":26,"value":"## 2. Add an event listener","pinned":false,"hidden":false,"mode":"md"},{"id":31,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"mutable tableArr = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"fixedArray = tableArr.map((itm,idx,arr)=>{ return {index:idx, item:itm}}); // from https://observablehq.com/@triptych/how-to-get-around-flat-array-issue-in-observable-tables","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"## 3. Render file contents!","pinned":false,"hidden":false,"mode":"md"},{"id":47,"value":"viewof table = Inputs.table(fixedArray)","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"What you might see if you dragged the JSON file from [this notebook](https://observablehq.com/@triptych/how-to-convert-a-markdown-list-to-json)","pinned":false,"hidden":false,"mode":"md"},{"id":67,"value":"chrome_24hyoxmune = FileAttachment(\"chrome_24HYOXmunE.png\").image()","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}