Skip to content

Instantly share code, notes, and snippets.

@jdanyow
Last active November 15, 2016 13:50
Show Gist options
  • Save jdanyow/51db953515fb1cac0b07 to your computer and use it in GitHub Desktop.
Save jdanyow/51db953515fb1cac0b07 to your computer and use it in GitHub Desktop.
Aurelia file input binding
<template>
<require from="./blob-to-url"></require>
<require from="./file-list-to-array"></require>
<input type="file" multiple accept="image/*" files.bind="selectedFiles">
<div>
<ul>
<li repeat.for="file of selectedFiles | fileListToArray">
<img src.bind="file | blobToUrl" />
<h3>${file.name}: ${file.type} ${file.size / 1000} kb</h3>
<p>Last Modified: ${file.lastModifiedDate}</p>
</li>
</ul>
</div>
</template>
export class App {
selectedFiles;
}
export class BlobToUrlValueConverter {
toView(blob) {
return URL.createObjectURL(blob);
}
}
export class FileListToArrayValueConverter {
toView(fileList) {
let files = [];
if (!fileList) {
return files;
}
for(let i = 0; i < fileList.length; i++) {
files.push(fileList.item(i));
}
return files;
}
}
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body aurelia-app>
<h1>Loading...</h1>
<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
* {margin: 0; padding: 0;}
div {
margin: 20px;
}
ul {
list-style-type: none;
width: 100%;
max-width: 700px;
}
h3 {
font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
}
li img {
float: left;
margin: 0 15px 0 0;
width: 100px;
height: auto;
}
li p {
font: 200 12px/1.5 Georgia, Times New Roman, serif;
}
li {
padding: 10px;
overflow: auto;
}
li:hover {
background: #eee;
cursor: pointer;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment