{
// 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')
})
}
mutable tableArr = []
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
viewof table = Inputs.table(fixedArray)
chrome_24hyoxmune = FileAttachment("chrome_24HYOXmunE.png").image()
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
