라벨이 Angular8인 게시물 표시

[Angular] File Upload > Drag and Drop 만들기

이미지
안녕하세요. 명동섞어찌개입니다.
오늘은 Angular 를 이용한 파일 업로드 기능 개발 시 편리한 사용성을 위해 Drag and Drop 드래그 앤 드랍 기능을 추가하는 방법을 알아볼건데요,

vanila javascript(순수 자바스크립트) 로 개발하면 익스플로러와 크롬 브라우저 등 브라우저 별 예외처리가 필요해서 시간이 꽤 걸리는 일이지만(개인적으로 0 부터 시작해서 개발했을 때 다른 업무 처리하면서 일주일 정도 걸렸습니다..)Angular 는 directive 를 사용해서 간편하게 개발할 수 있더라구요.

Angular Version: 8

결과화면 1. 먼저 drag-and-drop directive 를 만듭니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52import {Directive, EventEmitter, Host, HostBinding, HostListener, Input, Output} from '@angular/core';@Directive({selector: '[appDragDrop]'}) export classDragDropDirective{@Output() onFileDropped =new EventEmitter<any>();@Input('draggable')public draggable =true;@HostBinding('hintLine')public deco =false;@HostBinding('style.background-color')public background = '#fff';@HostBinding('style.opacity')public opacity ='1';//Drago…