Skip to content

Instantly share code, notes, and snippets.

@jdanyow

jdanyow/app.html

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.
Download ZIP
Aurelia file input binding
Raw
app.html
<template>
<input type="file" multiple accept="image/*" files.bind="selectedFiles">
<ul>
<li repeat.for="file of selectedFiles | fileListToArray">
<h1>${file.name}: ${file.type} ${file.size / 1000} kb</h1>
<img src.bind="file | blobToUrl"><img>
Last Modified: ${file.lastModifiedDate}
</li>
</ul>
</template>
Raw
app.js
export class App {
selectedFiles;
}
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;
}
}
export class BlobToUrlValueConverter {
toView(blob) {
return URL.createObjectURL(blob);
}
}
Raw
config.js
System.config({
defaultJSExtensions: true,
transpiler: "babel",
babelOptions: {
"ignore": ["github:*", "npm:*"],
"stage": 0,
"optional": []
},
paths: {
"github:*": "https://cdn.rawgit.com/jdanyow/aurelia-plunker/v0.10.1/jspm_packages/github/*",
"npm:*": "https://cdn.rawgit.com/jdanyow/aurelia-plunker/v0.10.1/jspm_packages/npm/*"
},
map: {
"aurelia-animator-css": "npm:[email protected]",
"aurelia-binding": "npm:[email protected]",
"aurelia-bootstrapper": "npm:[email protected]",
"aurelia-breeze": "npm:[email protected]",
"aurelia-computed": "npm:[email protected]",
"aurelia-dependency-injection": "npm:[email protected]",
"aurelia-dialog": "npm:[email protected]",
"aurelia-event-aggregator": "npm:[email protected]",
"aurelia-fetch-client": "npm:[email protected]",
"aurelia-framework": "npm:[email protected]",
"aurelia-history": "npm:[email protected]",
"aurelia-history-browser": "npm:[email protected]",
"aurelia-http-client": "npm:[email protected]",
"aurelia-i18n": "npm:[email protected]",
"aurelia-loader": "npm:[email protected]",
"aurelia-loader-default": "npm:[email protected]",
"aurelia-logging": "npm:[email protected]",
"aurelia-metadata": "npm:[email protected]",
"aurelia-path": "npm:[email protected]",
"aurelia-route-recognizer": "npm:[email protected]",
"aurelia-router": "npm:[email protected]",
"aurelia-task-queue": "npm:[email protected]",
"aurelia-templating": "npm:[email protected]",
"aurelia-templating-binding": "npm:[email protected]",
"aurelia-templating-resources": "npm:[email protected]",
"aurelia-templating-router": "npm:[email protected]",
"aurelia-validation": "npm:[email protected]",
"babel": "npm:[email protected]",
"babel-runtime": "npm:[email protected]",
"bootstrap": "github:twbs/[email protected]",
"breeze": "npm:[email protected]",
"clean-css": "npm:[email protected]",
"core-js": "npm:[email protected]",
"css": "github:systemjs/[email protected]",
"fetch": "github:github/[email protected]",
"moment": "npm:[email protected]",
"numeral": "npm:[email protected]",
"github:jspm/[email protected]": {
"assert": "npm:[email protected]"
},
"github:jspm/[email protected]": {
"buffer": "npm:[email protected]"
},
"github:jspm/[email protected]": {
"events": "npm:[email protected]"
},
"github:jspm/[email protected]": {
"Base64": "npm:[email protected]",
"events": "github:jspm/[email protected]",
"inherits": "npm:[email protected]",
"stream": "github:jspm/[email protected]",
"url": "github:jspm/[email protected]",
"util": "github:jspm/[email protected]"
},
"github:jspm/[email protected]": {
"https-browserify": "npm:[email protected]"
},
"github:jspm/[email protected]": {
"os-browserify": "npm:[email protected]"
},
"github:jspm/[email protected]": {
"path-browserify": "npm:[email protected]"
},
"github:jspm/[email protected]": {
"process": "npm:[email protected]"
},
"github:jspm/[email protected]": {
"stream-browserify": "npm:[email protected]"
},
"github:jspm/[email protected]": {
"url": "npm:[email protected]"
},
"github:jspm/[email protected]": {
"util": "npm:[email protected]"
},
"github:twbs/[email protected]": {
"jquery": "github:components/[email protected]"
},
"npm:[email protected]": {
"fs": "github:jspm/[email protected]",
"module": "github:jspm/[email protected]",
"path": "github:jspm/[email protected]",
"process": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"util": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-metadata": "npm:[email protected]",
"aurelia-pal": "npm:[email protected]",
"aurelia-templating": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-metadata": "npm:[email protected]",
"aurelia-pal": "npm:[email protected]",
"aurelia-task-queue": "npm:[email protected]",
"core-js": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-event-aggregator": "npm:[email protected]",
"aurelia-framework": "npm:[email protected]",
"aurelia-history": "npm:[email protected]",
"aurelia-history-browser": "npm:[email protected]",
"aurelia-loader-default": "npm:[email protected]",
"aurelia-logging-console": "npm:[email protected]",
"aurelia-pal": "npm:[email protected]",
"aurelia-pal-browser": "npm:[email protected]",
"aurelia-router": "npm:[email protected]",
"aurelia-templating": "npm:[email protected]",
"aurelia-templating-binding": "npm:[email protected]",
"aurelia-templating-resources": "npm:[email protected]",
"aurelia-templating-router": "npm:[email protected]",
"core-js": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-binding": "npm:[email protected]",
"aurelia-http-client": "npm:[email protected]",
"aurelia-pal": "npm:[email protected]",
"aurelia-pal-browser": "npm:[email protected]",
"aurelia-templating": "npm:[email protected]",
"breeze": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-binding": "npm:[email protected]",
"aurelia-logging": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-logging": "npm:[email protected]",
"aurelia-metadata": "npm:[email protected]",
"aurelia-pal": "npm:[email protected]",
"core-js": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-dependency-injection": "npm:[email protected]",
"aurelia-framework": "npm:[email protected]",
"aurelia-metadata": "npm:[email protected]",
"aurelia-pal": "npm:[email protected]",
"aurelia-templating": "npm:[email protected]",
"text": "github:systemjs/[email protected]"
},
"npm:[email protected]": {
"aurelia-logging": "npm:[email protected]"
},
"npm:[email protected]": {
"core-js": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-binding": "npm:[email protected]",
"aurelia-dependency-injection": "npm:[email protected]",
"aurelia-loader": "npm:[email protected]",
"aurelia-logging": "npm:[email protected]",
"aurelia-metadata": "npm:[email protected]",
"aurelia-pal": "npm:[email protected]",
"aurelia-path": "npm:[email protected]",
"aurelia-task-queue": "npm:[email protected]",
"aurelia-templating": "npm:[email protected]",
"core-js": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-history": "npm:[email protected]",
"aurelia-pal": "npm:[email protected]",
"core-js": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-pal": "npm:[email protected]",
"aurelia-path": "npm:[email protected]",
"core-js": "npm:[email protected]"
},
"npm:[email protected]": {
"Intl.js": "github:andyearnshaw/[email protected]",
"aurelia-binding": "npm:[email protected]",
"aurelia-dependency-injection": "npm:[email protected]",
"aurelia-event-aggregator": "npm:[email protected]",
"aurelia-loader-default": "npm:[email protected]",
"aurelia-pal": "npm:[email protected]",
"aurelia-templating": "npm:[email protected]",
"aurelia-templating-resources": "npm:[email protected]",
"i18next": "github:i18next/[email protected]"
},
"npm:[email protected]": {
"aurelia-loader": "npm:[email protected]",
"aurelia-metadata": "npm:[email protected]",
"aurelia-pal": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-metadata": "npm:[email protected]",
"aurelia-path": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-logging": "npm:[email protected]",
"aurelia-pal": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-pal": "npm:[email protected]",
"core-js": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-pal": "npm:[email protected]",
"core-js": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-path": "npm:[email protected]",
"core-js": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-dependency-injection": "npm:[email protected]",
"aurelia-event-aggregator": "npm:[email protected]",
"aurelia-history": "npm:[email protected]",
"aurelia-logging": "npm:[email protected]",
"aurelia-path": "npm:[email protected]",
"aurelia-route-recognizer": "npm:[email protected]",
"core-js": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-pal": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-binding": "npm:[email protected]",
"aurelia-logging": "npm:[email protected]",
"aurelia-templating": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-binding": "npm:[email protected]",
"aurelia-dependency-injection": "npm:[email protected]",
"aurelia-loader": "npm:[email protected]",
"aurelia-logging": "npm:[email protected]",
"aurelia-pal": "npm:[email protected]",
"aurelia-path": "npm:[email protected]",
"aurelia-task-queue": "npm:[email protected]",
"aurelia-templating": "npm:[email protected]",
"core-js": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-dependency-injection": "npm:[email protected]",
"aurelia-logging": "npm:[email protected]",
"aurelia-metadata": "npm:[email protected]",
"aurelia-pal": "npm:[email protected]",
"aurelia-path": "npm:[email protected]",
"aurelia-router": "npm:[email protected]",
"aurelia-templating": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-binding": "npm:[email protected]",
"aurelia-dependency-injection": "npm:[email protected]",
"aurelia-loader": "npm:[email protected]",
"aurelia-logging": "npm:[email protected]",
"aurelia-metadata": "npm:[email protected]",
"aurelia-pal": "npm:[email protected]",
"aurelia-path": "npm:[email protected]",
"aurelia-task-queue": "npm:[email protected]",
"core-js": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-binding": "npm:[email protected]",
"aurelia-dependency-injection": "npm:[email protected]",
"aurelia-logging": "npm:[email protected]",
"aurelia-metadata": "npm:[email protected]",
"aurelia-templating": "npm:[email protected]"
},
"npm:[email protected]": {
"process": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"base64-js": "npm:[email protected]",
"child_process": "github:jspm/[email protected]",
"fs": "github:jspm/[email protected]",
"ieee754": "npm:[email protected]",
"isarray": "npm:[email protected]",
"process": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"buffer": "github:jspm/[email protected]",
"commander": "npm:[email protected]",
"fs": "github:jspm/[email protected]",
"http": "github:jspm/[email protected]",
"https": "github:jspm/[email protected]",
"os": "github:jspm/[email protected]",
"path": "github:jspm/[email protected]",
"process": "github:jspm/[email protected]",
"source-map": "npm:[email protected]",
"url": "github:jspm/[email protected]",
"util": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"child_process": "github:jspm/[email protected]",
"events": "github:jspm/[email protected]",
"fs": "github:jspm/[email protected]",
"graceful-readlink": "npm:[email protected]",
"path": "github:jspm/[email protected]",
"process": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"fs": "github:jspm/[email protected]",
"process": "github:jspm/[email protected]",
"systemjs-json": "github:systemjs/[email protected]"
},
"npm:[email protected]": {
"fs": "github:jspm/[email protected]",
"path": "github:jspm/[email protected]",
"process": "github:jspm/[email protected]",
"systemjs-json": "github:systemjs/[email protected]"
},
"npm:[email protected]": {
"buffer": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"fs": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"http": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"util": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"process": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"fs": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"os": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"process": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"assert": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"process": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"buffer": "github:jspm/[email protected]",
"core-util-is": "npm:[email protected]",
"events": "github:jspm/[email protected]",
"inherits": "npm:[email protected]",
"isarray": "npm:[email protected]",
"process": "github:jspm/[email protected]",
"stream-browserify": "npm:[email protected]",
"string_decoder": "npm:[email protected]"
},
"npm:[email protected]": {
"amdefine": "npm:[email protected]",
"process": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"events": "github:jspm/[email protected]",
"inherits": "npm:[email protected]",
"readable-stream": "npm:[email protected]"
},
"npm:[email protected]": {
"buffer": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"assert": "github:jspm/[email protected]",
"punycode": "npm:[email protected]",
"querystring": "npm:[email protected]",
"util": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"inherits": "npm:[email protected]",
"process": "github:jspm/[email protected]"
}
}
});
Raw
index.html
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body aurelia-app="main">
<h1>Loading...</h1>
<script src="https://cdn.rawgit.com/jdanyow/aurelia-plunker/v0.10.1/jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
Raw
main.js
/*******************************************************************************
* The following two lines enable async/await without using babel's
* "runtime" transformer.
*
* More info here: https://github.com/jdanyow/aurelia-plunker/issues/2
*
* Feel free to remove these lines if your plunker doesn't use async/await.
*/
import regeneratorRuntime from 'babel-runtime/regenerator';
window.regeneratorRuntime = regeneratorRuntime;
/******************************************************************************/
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging();
aurelia.start().then(a => a.setRoot());
}
Raw
styles.css
/* Styles go here */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment