<commit_before>import { Component, Input } from '@angular/core';
import { UploadService } from '../../core';
import { ImageModel, StoryModel, SeriesModel } from '../model';

@Component({
  selector: 'publish-image-upload',
  styleUrls: ['image-upload.component.css'],
  template: `
    <publish-spinner *ngIf="model && !model?.images"></publish-spinner>

    <div *ngIf="noImages" class="new-image" [class.changed]="model.changed('images')" [style.width]="thumbnailWidth" [style.height]="thumbnailHeight">
      <p class="size">Minimum size: {{minWidth}}x{{minHeight}} px</p>
      <input type="file" id="image-file" publishFileSelect (file)="addUpload($event)" ngClass="{'invalid': this.imgError}"/>
      <label class="button" for="image-file">Add Image</label>
    </div>
    <p *ngIf="imgError" class="error">{{imgError}}</p>

    <div *ngIf="model && model.images">
      <publish-image-file *ngFor="let i of model.images" [image]="i" [thumbnailWidth]="thumbnailWidth" [thumbnailHeight]="thumbnailHeight"></publish-image-file>
    </div>
  `
})
export class ImageUploadComponent {

  @Input() model: StoryModel|SeriesModel;
  @Input() minWidth = 200;
  @Input() minHeight = 200;

  thumbnailHeight = '220px';
  imgError: string;
  reader: FileReader = new FileReader();

  constructor(private uploadService: UploadService) {}

  get noImages(): boolean {
    if (this.model && this.model.images) {
      if (this.model.images.length === 0) {
        return true;
      } else if (this.model.images.every(img => img.isDestroy)) {
        return true;
      }
    }
    return false;
  }

  get thumbnailWidth(): string {
    let width = '220px';
    if (this.minWidth !== this.minHeight) {
      width = `${220 * this.minWidth/this.minHeight}px`;
    }
    return width;
  }

  addUpload(file: File) {
    if ( !this.uploadService.validateFileType(file, ['jpeg', 'png']) ) {
      this.imgError = 'The file provided is in an unacceptable format. Please upload a file of type JPEG or PNG.';
      return;
    }

    this.reader.onloadstart = () => {
      this.imgError = '';
    };

    this.reader.onerror = () => {
      this.imgError = 'Error uploading image';
    };

    this.reader.onloadend = () => {
      let img = new Image();
      img.src = this.reader.result;
      if (img.width < this.minWidth || img.height < this.minHeight) {
        this.imgError = `The image provided is only ${img.width}x${img.height} px but should be at least ${this.minWidth}x${this.minHeight} px`;
      } else {
        let upload = this.uploadService.add(file);
        this.model.images.push(new ImageModel(this.model.parent, this.model.doc, upload));
      }
    };

    this.reader.readAsDataURL(file);
  }
}<commit_msg>Satisfy linter.<commit_after>import { Component, Input } from '@angular/core';
import { UploadService } from '../../core';
import { ImageModel, StoryModel, SeriesModel } from '../model';

@Component({
  selector: 'publish-image-upload',
  styleUrls: ['image-upload.component.css'],
  template: `
    <publish-spinner *ngIf="model && !model?.images"></publish-spinner>

    <div *ngIf="noImages" class="new-image" [class.changed]="model.changed('images')"
    [style.width]="thumbnailWidth" [style.height]="thumbnailHeight">
      <p class="size">Minimum size: {{minWidth}}x{{minHeight}} px</p>
      <input type="file" id="image-file" publishFileSelect (file)="addUpload($event)" ngClass="{'invalid': this.imgError}"/>
      <label class="button" for="image-file">Add Image</label>
    </div>
    <p *ngIf="imgError" class="error">{{imgError}}</p>

    <div *ngIf="model && model.images">
      <publish-image-file *ngFor="let i of model.images" [image]="i"
      [thumbnailWidth]="thumbnailWidth" [thumbnailHeight]="thumbnailHeight"></publish-image-file>
    </div>
  `
})
export class ImageUploadComponent {

  @Input() model: StoryModel|SeriesModel;
  @Input() minWidth = 200;
  @Input() minHeight = 200;

  thumbnailHeight = '220px';
  imgError: string;
  reader: FileReader = new FileReader();

  constructor(private uploadService: UploadService) {}

  get noImages(): boolean {
    if (this.model && this.model.images) {
      if (this.model.images.length === 0) {
        return true;
      } else if (this.model.images.every(img => img.isDestroy)) {
        return true;
      }
    }
    return false;
  }

  get thumbnailWidth(): string {
    let width = '220px';
    if (this.minWidth !== this.minHeight) {
      width = `${220 * this.minWidth / this.minHeight}px`;
    }
    return width;
  }

  addUpload(file: File) {
    if ( !this.uploadService.validateFileType(file, ['jpeg', 'png']) ) {
      this.imgError = 'The file provided is in an unacceptable format. Please upload a file of type JPEG or PNG.';
      return;
    }

    this.reader.onloadstart = () => {
      this.imgError = '';
    };

    this.reader.onerror = () => {
      this.imgError = 'Error uploading image';
    };

    this.reader.onloadend = () => {
      let img = new Image();
      img.src = this.reader.result;
      if (img.width < this.minWidth || img.height < this.minHeight) {
        this.imgError = `The image provided is only ${img.width}x${img.height} px
                         but should be at least ${this.minWidth}x${this.minHeight} px.`;
      } else {
        let upload = this.uploadService.add(file);
        this.model.images.push(new ImageModel(this.model.parent, this.model.doc, upload));
      }
    };

    this.reader.readAsDataURL(file);
  }
}
{'fraction_non_alphanumeric': 0.16903979554581963, 'fraction_numerical': 0.005841548010222709, 'mean_word_length': 3.2374323279195667, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 0, '>': 41, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2265695', 'n_tokens_mistral': 1799, 'n_tokens_neox': 1740, 'n_words': 374}