【Angular】드래그＆드롭으로 화상을 읽어들여 표시한다

마지막 : 이미지 로드 및 표시

이번에는 드래그 앤 드롭으로 영역으로 드래그하여 가져온 이미지를 불러와 표시하는 샘플을 만들어 갑니다.
미기록 클래스는 부트스트랩을 참조하십시오.

html

<div class="container-md text-center">
  <div 
    class="dragarea w-100 border bg-light d-flex align-items-center"
    (dragover)="dragOver($event)" (drop)="drop($event)"
  >
    <span class="mx-auto">ドラッグエリア</span>
  </div>
  <input type="file" id="dragareaInput" style="display:none" (change)="onChangeDragAreaInput($event)">
  <label class="mt-3 btn btn-secondary" for="dragareaInput">参照</label>
  <div class="row">
    <img *ngFor="let i of img" [src]="i" class="col-6">
  </div>
</div>

css

.dragarea {
  height: 300px;
}

typescript

  onChangeDragAreaInput(event){
    // ファイルの情報はevent.target.filesにある
    let reader = new FileReader();
    const file = event.target.files[0];
    reader.readAsDataURL(file);
    reader.onload = () => {
      this.img.push(reader.result);
    };
  }

  dragOver(event:DragEvent){
    // ブラウザで画像を開かないようにする
    event.preventDefault();
  }
  drop(event:DragEvent){
    // ブラウザで画像を開かないようにする
    event.preventDefault();

    const file = event.dataTransfer.files;
    const fileList = Object.entries(file).map(f=>f[1]);
    console.log(fileList);

    fileList.forEach(f=>{
      let reader = new FileReader();
      reader.readAsDataURL(f);
      reader.onload = () => {
        this.img.push(reader.result);
      };
    });
  }

preventDefault를 작동시키지 않으면 브라우저에서 이미지를 열어 버린다.