9st July Report

Progress

09:00 - Entering BMW Lab.

Improving upload image function

Image Upload function now can:

• Display the image that will be uploaded
• Delete the image that will be uploaded
• Limit upload to three image

To make this function add in some code in page.
report-problem.module.html

<div class="imageContainer">
      <h4 lines="none" style="margin: 5px; width: 250px;">
        Upload image optional
      </h4>
      <div *ngIf="url[0]!=null" class="addImage">
        <img [src]="url[0]" class="imageUrl">
        <div class="delete" (click)="delete(0)"><u><b>Delete</b></u></div>
      </div>
      <div *ngIf="url[1]!=null" class="addImage">
        <img [src]="url[1]" class="imageUrl">
        <div class="delete" (click)="delete(1)"><u><b>Delete</b></u></div>
      </div>
      <div *ngIf="url[2]!=null" class="addImage">
        <img [src]="url[2]" class="imageUrl">
        <div class="delete" (click)="delete(2)"><u><b>Delete</b></u></div>
      </div>
      <div *ngIf="imageIndex < 3" class="image-upload">
        <label for="file-input">
          <img src="/assets/upload-image/upload.png" class="uploadPhoto" />
        </label>
        <input id="file-input" accept="image/*" type="file" (change)="onFileSelect($event)" />
      </div>
    </div>

report-problem.module.ts

async onFileSelect(event) {

    if (event.target.files.length > 0) {
      this.fileImage[this.imageIndex] = event.target.files[0];



      var reader = new FileReader();
      reader.readAsDataURL(event.target.files[0]); // read file as data url
      reader.onload = (event) => { // called once readAsDataURL is completed
        this.url[this.imageIndex] = event.target.result;
        this.imageIndex++;
      }

    }
  }

  async delete(index) {
    if (index === 0) {
      this.url[0] = this.url[1];
      this.url[1] = this.url[2];
      this.url[2] = null;
      this.fileImage[0] = this.fileImage[1];
      this.fileImage[1] = this.fileImage[2];
      this.fileImage[2] = null;

    } else if (index === 1) {
      this.url[1] = this.url[2];
      this.url[2] = null;
      this.fileImage[1] = this.fileImage[2];
      this.fileImage[2] = null;
    } else {
      this.url[2] = null;
      this.fileImage[2] = null;

    }
    this.imageIndex--;
  }

report-problem.module.css

.uploadPhoto {
    display: block;
    opacity: 0.5;
    margin: 5px;
}

.image-upload {
    height: 75px;
    width: 75px;
    margin: 5px;
    float: left;
    display: table-row;

}

.imageContainer {
    border: gray;
    border-style: solid;
    border-radius: 5px;
    margin-top: 10px;
    margin-bottom: 20px;
    padding: 10px;
    display: table;
    margin-left: auto;
    margin-right: auto;

}

.image-upload>input {
    display: none;
}

.addImage {
    float: left;
    border-style: dashed;
    border-radius: 5px;
    border-color: grey;
    margin-left: 5px;
}

.delete {
    text-align: center;
    color: red;
    margin-bottom: 5px;
    opacity: 0.5;
}

.imageUrl {
    max-height: 75px;
    margin: 5px;
    display: table-row;
}

Result

16.00 - Make weekly presentation.

Presentation Week 1

18:00 - Leave BMW Lab.

tags: on-intern