open web tools for creativity and community
viewof demoInput = imageInput()
demoInput
md`## Implementation`
imageInput = function() {
const inputForm = form(html`
<form>
<label>Image file: <input name="file" type="file" accept="image/*" /></label><br />
<label>Image URL: <input name="url" type="url" /></label><br />
<input type="submit" value="Go" />
<input type="reset" value="Reset" />
</form>
`);
const container = html`<div>${inputForm}</div>`;
container.value = null;
inputForm.addEventListener('submit', function() {
if (!inputForm.value.url && !inputForm.value.file) {
container.value = null;
container.dispatchEvent(new CustomEvent("input"));
return;
}
var image = new Image();
image.src = inputForm.value.url
? inputForm.value.url
: URL.createObjectURL(inputForm.value.file);
image.crossOrigin = "anonymous";
image.onload = () => {
container.value = image;
container.dispatchEvent(new CustomEvent("input"));
};
image.onerror = error => {
container.value = error;
container.dispatchEvent(new CustomEvent("input"));
};
});
return container;
}
import {form} from "@mbostock/form-input"
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.
