Skip to content

Instantly share code, notes, and snippets.

Forked from davismj/app.html
Last active December 2, 2017 13:05
Show Gist options
  • Save aluanhaddad/8371efa96bc1e9054b36181538fdabcc to your computer and use it in GitHub Desktop.
Save aluanhaddad/8371efa96bc1e9054b36181538fdabcc to your computer and use it in GitHub Desktop.
Test: Upload custom element
<require from="upload"></require>
<main style="padding: 1rem;">
<dt>Behaves like a vanilla button.</dt>
<upload file.bind="f1">Upload</upload>
<span if.bind="f1">${} selected</span>
Respects class and inline css defintions.
<upload class="btn ${f2 ? 'btn-success' : 'btn-primary'}" file.bind="f2">Upload</upload>
<span if.bind="f2">${} selected</span>
Has a two way "file" binding.
<upload class="btn btn-primary" accept.bind="image/png" file.bind="f3">Upload<span if.bind="f3"> (${} selected)</span></upload>
export class App {
f1 = null;
f2 = null;
f3 = new File([], 'default.png');
<!doctype html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<body aurelia-app="main">
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
export function configure(aurelia) {
style="cursor: pointer; ${style}"
import { containerless,observable, bindable, bindingMode } from 'aurelia-framework';
bindable.twoWay = (...args) => bindable({ defaultBindingMode: bindingMode.twoWay })(...args);
export class UploadCustomElement {
@bindable class;
@bindable style;
@bindable get accept(){
return this.accept_;
set accept(v){this.accept_=v;}
@bindable.twoWay file;
upload = document.createElement('input');
onFileSelected = (event) => {
this.file =[0]; = null;
constructor() {
this.upload.type = 'file';
bind() {
this.upload.accept = `${this.accept}`;
this.upload.addEventListener('change', this.onFileSelected);
unbind() {
this.upload.removeEventListener('change', this.onFileSelected);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment