Skip to content

Instantly share code, notes, and snippets.

View StefanNieuwenhuis's full-sized avatar
:bowtie:
Follow me on twitter @stefannhs

stefannhs StefanNieuwenhuis

:bowtie:
Follow me on twitter @stefannhs
26 followers · 14 following
View GitHub Profile
@StefanNieuwenhuis
StefanNieuwenhuis / npm error log
Created June 9, 2017 06:30
0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/Cellar/node/8.1.0_1/bin/node',
1 verbose cli '/usr/local/bin/npm',
1 verbose cli 'uninstall',
1 verbose cli '-g',
1 verbose cli '@angular/cli' ]
2 info using npm@5.0.3
3 info using node@v8.1.0
4 verbose npm-session fe4975a670f046da
5 silly install loadCurrentTree
@StefanNieuwenhuis
StefanNieuwenhuis / auth.guard.ts
Created April 3, 2017 05:15
AngularFireAuthGuard
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { AngularFire } from 'angularfire2';
import 'rxjs/add/operator/map';
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private af: AngularFire, private router:Router) {}
@StefanNieuwenhuis
StefanNieuwenhuis / stenciljs-image-upload__render-template.tsx
Last active December 24, 2018 13:43
stenciljs-image-upload__render-template
render() {
return <div class="image-upload">
<div class="image-upload__edit">
<label htmlFor="file"></label>
<input type="file" name="files[]" id="file" accept="image/*" class="image-upload__input"
onChange={($event: any) => this.onInputChange($event.target.files)} />
</div>
<div class="image-upload__preview">
<div id="image-preview"></div>
@StefanNieuwenhuis
StefanNieuwenhuis / stenciljs-image-upload__styling.css
Created December 24, 2018 13:45
stenciljs-image-upload__styling
.image-upload {
position: relative;
max-width: 205px;
margin: 50px auto;
}
.image-upload__edit {
position: absolute;
top: 10px;
right: 12px;
@StefanNieuwenhuis
StefanNieuwenhuis / stenciljs-image-upload__logic-step1.tsx
Last active December 27, 2018 09:37
import { Component} from '@stencil/core';
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true
})
export class MyComponent {
public onInputChange(files: FileList) {
// check if 1 image is uploaded
@StefanNieuwenhuis
StefanNieuwenhuis / stenciljs-image-upload__logic-step2.tsx
Last active December 27, 2018 09:37
import { Component } from '@stencil/core';
const MAX_UPLOAD_SIZE = 1024; // bytes
const ALLOWED_FILE_TYPES = 'image.*';
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true
})
@StefanNieuwenhuis
StefanNieuwenhuis / stenciljs-image-upload__logic-step4.tsx
Last active December 27, 2018 10:30
import { Component, Element, Event, EventEmitter } from '@stencil/core';
const MAX_UPLOAD_SIZE = 1024; // bytes
const ALLOWED_FILE_TYPES = 'image.*';
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true
})
@StefanNieuwenhuis
StefanNieuwenhuis / stenciljs-image-upload__logic-step4.tsx
Last active December 27, 2018 10:31
import { Component, Element } from '@stencil/core';
const MAX_UPLOAD_SIZE = 1024; // bytes
const ALLOWED_FILE_TYPES = 'image.*';
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true
})
@StefanNieuwenhuis
StefanNieuwenhuis / stenciljs-image-upload__logic-step3.tsx
Last active December 27, 2018 10:31
import { Component } from '@stencil/core';
const MAX_UPLOAD_SIZE = 1024; // bytes
const ALLOWED_FILE_TYPES = 'image.*';
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true
})
@StefanNieuwenhuis
StefanNieuwenhuis / stenciljs-image-upload__index.html
Created December 27, 2018 10:35
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
<title>Stencil Component Starter</title>
<script src="/build/mycomponent.js"></script>
<script>
document.addEventListener('onUploadCompleted', (e) => console.log(e));
</script>