### File

`src/app/layout/image/image.component.ts`

### Implements

`OnInit`

### Metadata

selector | `app-image`
styleUrls | `image.component.scss`
templateUrl | `./image.component.html`

### Index

###### Properties
error fileInput fileSizeExceeded formData processing Public router text userImageFile
###### Methods
ngOnInit Public uploadImage

### Constructor

`constructor(_textService: TextService, router: Router, elem: ElementRef, http: HttpClient)`
Defined in src/app/layout/image/image.component.ts:23
Parameters :
Name | Type | Optional | Description
_textService | `TextService` |  |
router | `Router` |  |
elem | `ElementRef` |  |
http | `HttpClient` |  |

### Methods

ngOnInit
`ngOnInit()`
Defined in src/app/layout/image/image.component.ts:69
Returns : `void`

Public uploadImage
`uploadImage(url: string)`
Defined in src/app/layout/image/image.component.ts:27
Parameters :
Name | Type | Optional | Description
url | `string` |  |
Returns : `void`

### Properties

error
`error: `boolean``
Type : `boolean`
Defined in src/app/layout/image/image.component.ts:21

fileInput
`fileInput: ```
Decorators : `ViewChild`
Defined in src/app/layout/image/image.component.ts:16

fileSizeExceeded
`fileSizeExceeded: `boolean``
Type : `boolean`
Defined in src/app/layout/image/image.component.ts:22

formData
`formData: ```
Defined in src/app/layout/image/image.component.ts:23

processing
`processing: `boolean``
Type : `boolean`
Defined in src/app/layout/image/image.component.ts:19

Public router
`router: `Router``
Type : `Router`
Defined in src/app/layout/image/image.component.ts:24

text
`text: `IText``
Type : `IText`
Defined in src/app/layout/image/image.component.ts:18

userImageFile
`userImageFile: `File``
Type : `File`
Defined in src/app/layout/image/image.component.ts:20

    import { Component, Input, NgModule, OnInit, ElementRef, ViewChild } from '@angular/core';
    import { routerTransition } from '../../router.animations';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { HttpClient, HttpErrorResponse } from '@angular/common/http';
    import { TextService, IText } from '../../shared'
    import { Router } from '@angular/router';

    @Component({
      selector: 'app-image',
      templateUrl: './image.component.html',
      styleUrls: ['./image.component.scss'],
      animations: [routerTransition()]
    })
    export class ImageComponent implements OnInit {

      @ViewChild('fileInput') fileInput;

      text: IText;
      processing: boolean;
      userImageFile: File;
      error: boolean;
      fileSizeExceeded: boolean;
      formData = new FormData();
      constructor(private _textService: TextService, public router: Router, private elem: ElementRef, private http: HttpClient) { }

      public uploadImage(url: string): void {
        this.processing = true;
        const fileBrowser = this.fileInput.nativeElement;
        if (fileBrowser.files && fileBrowser.files[0]) {
          this.userImageFile = fileBrowser.files[0];

          // check filesize
          if (this.userImageFile.size > 26214400) {
            this.fileSizeExceeded = true;
            this.processing = false;
            return;
          }

          this.formData.append('file', fileBrowser.files[0]);
        } else {
          return;
        }

        const DocFile: File = this.userImageFile;
        console.log(this.formData);
        this._textService.enhancedImage(this.formData)
          .subscribe
          (res => {
            this.text = res;
            this._textService.resultText = this.text;
            this.processing = false;
            this.router.navigateByUrl(url);
          },

          (err: HttpErrorResponse) => {
            if (err.error instanceof Error) {
              console.log('Client-side Error occured');
            } else {
              this.error = true;
              this.processing = false;
              console.log('Server-side Error occured');
            }
          }
          );

      }

      ngOnInit() {
        window.scrollTo(0, 0);
      }

    }

    <div [@routerTransition] class="container-fluid">

    	<!--Alert-->
    	<div class="alert alert-danger" role="alert" *ngIf='error'>
    		<strong>Oh snap!</strong> The file is not readable.
    	</div>

    	<div class="alert alert-warning" role="alert" *ngIf='fileSizeExceeded'>
    			<strong>Oh snap!</strong> The file is too big, please choose a smaller file. Maximum 25 mb.
    	</div>

    	<div class="card card-danger card-inverse mb-3 col-lg-12 center-block">
    		<div class="card-header card-info">
    			<i class="fa fa-fw fa-picture-o fa-2x float-right" title="Upload your Image"></i>Upload your Image.&nbsp;&nbsp;
    			<i class="fa fa-spinner fa-spin" style="font-size:32px;color:white" *ngIf='processing && userImageFile'></i>
    			<span class="badge badge-default">MAX 25 MB</span>
    		</div>

    		<div class="card-block bg-white">
    			<form>
    				<div class="form-group">
    					<input type="file" id="myfile" #fileInput name="myfile" class="btn-block btn btn-danger" accept="image/*" />
    				</div>

    				<!-- Button (Double) -->
    				<div class="row">
    					<div class="col-md-12 ">
    						<div class="float-right">
    							<button type="button" class=" btn-block btn btn-secondary" (click)="uploadImage('/enhanced-text-result')">
    								<i class="fa fa-file-text" aria-hidden="true"></i> Enhanced Text</button>
    							<button type="button" class="btn-block btn btn-primary" (click)="uploadImage('/text-statistics')">
    								<i class="fa fa-pie-chart" aria-hidden="true"></i> Statistics</button>
    						</div>
    					</div>
    				</div>

    			</form>
    		</div>
    	</div>

    	<div class="row" style="margin-top: 50px;">
    		<div>
    			<h5>Instruction</h5>
    		</div>
    	</div>
    	<hr>

    	<!--Instructions Boxes-->
    	<div class="row topMargin">

    		<div class="col-md box1">
    			<div class="col-md-12">
    				<i class="fa fa-upload fa-3x " style="padding-bottom: 10px;" aria-hidden="true"></i>
    			</div>
    			<div class="col-md-12">
    				<h5>Choose your Image file</h5>
    				<hr>
    				<p>Maximum 25 MB.</p>
    			</div>
    		</div>
    		<div class="col-md box2">
    			<div class="col-md-12">
    				<i class="fa fa-file-text fa-3x " style="padding-bottom: 10px;" aria-hidden="true"></i>
    			</div>

    			<div class="col-md-12">
    				<h5>Press "Enhanced Text"</h5>
    				<hr>
    				<p>to read your text in frequency-based color coded system.</p>
    			</div>
    		</div>
    		<div class="col-md box3">
    			<div class="col-md-12">
    				<i class="fa fa-pie-chart fa-3x " style="padding-bottom: 10px;" aria-hidden="true"></i>
    			</div>
    			<div class="col-md-12">
    				<h5>Press "Statistics"</h5>
    				<hr>
    				<p>to see if the text is suitable for you and view a detailed analysis of the text.</p>
    			</div>
    		</div>

    	</div>

    </div>

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""