【Angular】ドラッグ＆ドロップで画像を読み込み表示する

6881 ワード
Angular Angular テキストリンク

前回:画像を読み込んで表示する

今回はドラッグ＆ドロップでエリアにドラッグして持ってきた画像を読み込んで表示するサンプルを作っていきます
未記載のclassはブートストラップを参照してください

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を動作させないとブラウザで画像開いちゃう、覚えた。