0

I am trying to create a custom form input for file uploads in angular 2 based on this post Angular 2 custom form input but I the following error err

zone.js:446 Unhandled Promise rejection: Cannot read property 'subscribe' of undefined ; Zone: angular ; Task: Promise.then ; Value: TypeError: Cannot read property 'subscribe' of undefined(…)

my code is

import {
  Component,
  Directive,
  EventEmitter,
  Provider,
} from 'angular2/core';

import { NG_VALUE_ACCESSOR } from 'angular2/common';
import { CONST_EXPR } from 'angular2/src/facade/lang';
import { forwardRef } from 'angular2/src/core/di';

@Component({
  selector: 'file-upload',
  template: `<div
class="drop-zone"
(dragover)="dragover = true"
(dragleave)="dragover = false"
(drop)="handleFiles($event); $event.preventDefault();"
[ngClass]="{'dragover':dragover}"
>
  Drop file here
</div>
<input type="file" (change)="handleFiles($event)" id="fileup"> <label for="fileup" class="button">Upload File</label>
<br>`,
  styles: [require('./file-upload.component.sass')],
  outputs: ['fileChange'],
})
export class FileUploadComponent {
  constuctor() {
    this.fileChange = new EventEmitter(false);
  }
  setValue(value) {
    this.image = value;
  }
  handleFiles(event) {
    event.preventDefault();
    event.stopPropagation();
    const files = event.target.files || event.dataTransfer.files;
    const file = files[0];

    const reader = new FileReader();
    reader.onload = (e) => {
      this.fileChange.emit(e.target.result);
    };
    reader.readAsBinaryString(file);
  }
}

const CUSTOM_VALUE_ACCESSOR = CONST_EXPR(new Provider(
  NG_VALUE_ACCESSOR, {
    useExisting: forwardRef(() => FileUploadValueAccessor),
    multi: true,
  }));

@Directive({
  selector: 'file-upload',
  host: {
    '(fileChange)': 'onChange($event)',
  },
  providers: [CUSTOM_VALUE_ACCESSOR],
})
export class FileUploadValueAccessor {
  static get parameters() {
    return [[FileUploadComponent]];
  }
  constructor(host) {
    this.host = host;
    this.onChange = () => {};
    this.onTouched = () => {};
  }

  writeValue(value) {
    this.host.setValue(value);
  }

  registerOnChange(fn) {
    this.onChange = fn;
  }
  registerOnTouched(fn) {
    this.onTouched = fn;
  }
}

1 Answer 1

1

I found the solution, the problem was that I had a typo "constuctor" should be "constructor" thus the output fileChange was not defined.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.