Angular - 문자열 클립보드에 복사, 영역 선택하기.

FANZEEL.COM 을 운영하는데, 이미지 첨부를 할일이 굉장히 많다.

관리자단에 이미지를 올릴 수 있게 해달라는 명령이 떨어졌다.

목표1 : AWS - S3 에 이미지 파일을 업로드, CloudFront 를 붙인 주소를 사용할 수 있도록 한다.

목표2 : 어드민 페이지에서 이미지 주소를 쉽게 사용할 수 있도록, '클릭' 한번하면, 그냥 클립보드에 복사되도록 만든다.

1. Angular 에서 파일업로드가 성공후, 이미지 리스트를 다시 불러온다 하더라도, 페이지가 이동된게 아니기 때문에, 파일 업로드 <input> 의 상태는 파일이 선택되어있는 상태 그대로 유지되고 있다. 그래서, 파일 업로드가 성공하면, 리스트가 리프레시될 뿐 아니라, 선택되어있는 파일들을 제거해줘야 한다.

- 우선 input 에 #으로 id 를 부여, .ts 에서 ViewChild 로 받아와 제어한다.

 - component.html

<input #fileInput name="image" type="file" multiple="multiple" accept="image/*" (change)="onFileSelected($event)" />

 - component.ts

@ViewChild('fileInput') fileInput;

//성공후.

onCompleted(){

this.fileInput.nativeElement.value = "";

}

간단히 끝.

2. 문자열을 클립보드에 복사.

- 라이브러리 같은것을 쓸 수 도 있지만, 그런거 안쓰고 꼼수로 만들었따.

- 임시로 안보이는 textarea 를 만들어내고, 거기다 문자열 넣고, 복사해버리고, textarea 를 없애버리는 꼼수이다.

let selBox = document.createElement('textarea');

selBox.style.position = 'fixed';

selBox.style.left = '0';

selBox.style.top = '0';

selBox.style.opacity = '0';

selBox.value = 'myTextmyTextmyText';

document.body.appendChild(selBox);

selBox.focus();

selBox.select();

document.execCommand('copy');

document.body.removeChild(selBox);

3. 클릭한번으로 영역 선택상태로 만들어주기.

let p = document.getElementById("YOUR_ELEMENT_ID");

var selection = window.getSelection();

var range = document.createRange();

range.selectNodeContents(p);

selection.removeAllRanges();

selection.addRange(range);