Published
Edited
Jul 1, 2020
1 fork
1 star
md`# Loading local image files examples`
md`## Load local file`
viewof file = html`<input type=file accept="image/*">`
{
console.log(file);
const img = document.createElement("img");
img.src = URL.createObjectURL(file);
img.height = 60;
img.onload = function() {
URL.revokeObjectURL(this.src);
}
return img;
}
md`## Load all files in folder`
viewof files = html`<input type=file accept="image/*" webkitdirectory multiple>`
{
const list = document.createElement("ul");
const len = files.length;
for (let i = 0; i < Math.min(5, len); i += 1) { // display max 5 images
const li = document.createElement("li");
list.appendChild(li);
console.log(files[i]);
const img = document.createElement("img");
img.src = URL.createObjectURL(files[i]);
img.height = 100;
img.onload = function() {
URL.revokeObjectURL(this.src);
}
li.appendChild(img);
const info = document.createElement("span");
info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
li.appendChild(info);
}
return list;
}
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.
