Skip to content

Instantly share code, notes, and snippets.

@aluanhaddad
Forked from davismj/app.html
Created December 2, 2017 12:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aluanhaddad/b807c18e57059fcdcd7a424e0fe0c456 to your computer and use it in GitHub Desktop.
Save aluanhaddad/b807c18e57059fcdcd7a424e0fe0c456 to your computer and use it in GitHub Desktop.
Test: Upload custom element
<template>
<require from="upload"></require>
<main style="padding: 1rem;">
<dl>
<dt>Behaves like a vanilla button.</dt>
<dd>
<upload file.bind="f1">Upload</upload>
<span if.bind="f1">${f1.name} selected</span>
</dd>
<dt>
Respects class and inline css defintions.
</dt>
<dd>
<upload class="btn ${f2 ? 'btn-success' : 'btn-primary'}" file.bind="f2">Upload</upload>
<span if.bind="f2">${f2.name} selected</span>
</dd>
<dt>
Has a two way "file" binding.
</dt>
<dd>
<upload class="btn btn-primary" file.bind="f3">Upload<span if.bind="f3"> (${f3.name} selected)</span></upload>
</dd>
</dl>
</main>
</template>
export class App {
f1 = null;
f2 = null;
f3 = new File([], 'default.png');
}
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body aurelia-app>
<h1>Loading...</h1>
<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
<script>
require(['aurelia-bootstrapper']);
</script>
</body>
</html>
<template>
<button
class.bind="class"
style="cursor: pointer; ${style}"
click.delegate="upload.click()"
role="button">
<slot>
</slot>
</button>
</template>
import { containerless, bindable, bindingMode } from 'aurelia-framework';
bindable.twoWay = (...args) => bindable({ defaultBindingMode: bindingMode.twoWay })(...args);
@containerless
export class UploadCustomElement {
@bindable class
@bindable style;
@bindable.twoWay file;
upload;
onFileSelected = (event) => {
this.file = event.target.files[0];
event.target.value = null;
}
constructor() {
this.upload = document.createElement('input');
this.upload.type = 'file';
this.upload.accept="image/*";
}
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