Skip to content

Instantly share code, notes, and snippets.

Last active Dec 2, 2017
What would you like to do?
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" 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>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<button class.bind="class" style="cursor: pointer; ${style}" click.delegate="" role="button">
import { containerless, bindable, bindingMode } from 'aurelia-framework';
export class UploadCustomElement {
@bindable class;
@bindable style;
@bindable({ defaultBindingMode: bindingMode.twoWay }) file;
onFileSelected = (event) => {
this.file =[0]; = null;
constructor() {
this.upload = document.createElement('input');
this.upload.type = 'file';
bind() {
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