Giter VIP home page Giter VIP logo

angular2-quickstart's Introduction

Angular 2 bootstrap

A repo that demonstrates how to bootstrap an Angular 2 application and walk-through how to create a custom component.

A related blog url is here at http://www.manvendrask.com/2016/04/10/angular-2-up-and-running/ and http://www.tothenew.com/blog/angular-2-quick-start-and-a-custom-gravatar-component.

angular2-quickstart's People

Contributors

captainofflyingdutchman avatar

Stargazers

 avatar Benjamin Ugbene avatar  avatar  avatar

Watchers

James Cloos avatar  avatar

angular2-quickstart's Issues

MD5 error

Environment

OS

elementary OS 5.0 Juno

Angular

Angular CLI: 8.3.12
Node: 12.12.0
OS: linux x64
Angular: 8.0.1
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.3
@angular-devkit/build-angular     0.800.3
@angular-devkit/build-optimizer   0.800.3
@angular-devkit/build-webpack     0.800.3
@angular-devkit/core              8.0.3
@angular-devkit/schematics        8.3.12
@angular/cdk                      8.1.1
@angular/cli                      8.3.12
@angular/flex-layout              8.0.0-beta.26
@angular/material                 8.1.1
@ngtools/webpack                  8.0.3
@schematics/angular               8.3.12
@schematics/update                0.803.12
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.30.0

Browser

Chrome
Version 77.0.3865.120 (Official Build) (64-bit)

html template

  <form enctype="multipart/form-data" method="post">
    <div>
      <label for="picked">ARFF dataset</label>
      <div>
        <input
          type="file"
          id="picked"
          #picked
          (click)="message = ''"
          (change)="onPicked(picked)"
        />
      </div>
    </div>
  </form>

controller ts

import { Component } from "@angular/core";
import { UploaderService } from "./uploader.service";
import { global } from "../global";
import { md5 } from "./md5";
@Component({
  selector: "app-uploader",
  templateUrl: "./uploader.component.html",
  providers: [UploaderService]
})
export class UploaderComponent {
  message: string = "Please upload an .arff file!";
  constructor(private uploaderService: UploaderService) {}
  userID: string = null;
  onPicked(input: HTMLInputElement) {
    const file = input.files[0];

    if (file) {
      const fileMD5 = md5(file);
      console.log("File MD5" + fileMD5);
      let fileExtension = file.name.split(".").pop();
      // console.log(fileExtension);
      if (fileExtension != "arff" && fileExtension != "ARFF") {
        this.message = "File error! Please provide a valid arff file!";
        console.error("File extension error!");
      } else {
        this.uploaderService.upload(file).subscribe(msg => {
          input.value = null;
          this.message = msg;
          this.userID = global.userID;
        });
      }
    }
  }
}
UploaderComponent.html:12 ERROR TypeError: string.replace is not a function
    at Utf8Encode (md5.ts:102)
    at md5 (md5.ts:144)
    at UploaderComponent.onPicked (uploader.component.ts:18)
    at Object.eval [as handleEvent] (UploaderComponent.html:17)
    at handleEvent (core.js:34789)
    at callWithDebugContext (core.js:36407)
    at Object.debugHandleEvent [as handleEvent] (core.js:36043)
    at dispatchEvent (core.js:22533)
    at core.js:33721
    at HTMLInputElement.<anonymous> (platform-browser.js:1789)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.