본문으로 건너뛰기
Documentation

RwPasteUpload

마지막 게시: 2026-07-21 19:00

RwPasteUpload

지정한 화면 영역에서 클립보드의 파일을 받아 호출 화면으로 전달하는 붙여넣기 도우미입니다. 자체 파일 목록 UI를 제공하기보다 붙여넣기와 파일 선택을 수집해 기존 첨부 구성요소나 업로드 API에 연결합니다.

동작 범위

기본 대상은 body이며 TargetSelector로 붙여넣기를 감지할 요소를 지정할 수 있습니다. 구성요소가 초기화되면 JavaScript 이벤트를 연결하고, 화면에서 제거될 때 이벤트를 해제합니다.

주요 설정

항목 기본값 설명
TargetSelector body paste 이벤트를 받을 요소 선택자
MaxFileCount 20 한 번에 받을 수 있는 파일 수
MaxFileSize 20MB 파일 한 건의 최대 크기
OnFilesReady 이벤트 허용된 파일의 이름·형식·크기·Base64 전달
OnFilesRejected 이벤트 거부된 파일과 사유 전달
TriggerFileInput() 메서드 파일 선택 창 열기

붙여넣기 처리

사용자가 대상 영역에서 파일이나 화면 캡처를 붙여넣으면 허용 개수와 크기를 검사합니다. 통과한 항목은 (Name, ContentType, Size, Base64) 목록으로 OnFilesReady에 전달되고, 거부된 항목은 파일명과 이유가 OnFilesRejected로 전달됩니다.

파일 선택

붙여넣기를 사용할 수 없는 환경을 위해 TriggerFileInput()으로 파일 선택 창을 열 수 있습니다. 버튼은 호출 화면에서 제공하고, 선택 결과는 붙여넣기와 같은 이벤트 흐름으로 처리합니다.

업로드 API 연결

OnFilesReady에서 Base64 문자열을 장기 상태나 DB에 저장하지 않습니다. 파일 DTO를 업로드 API에 즉시 전달하고, 서버가 반환한 자산 식별자와 URL만 업무 문서에 연결합니다. 대용량 파일을 지원해야 한다면 Base64 방식보다 스트림 업로드 구성요소를 사용합니다.

사용 예

<RwPasteUpload TargetSelector="#document-editor"
               MaxFileCount="5"
               OnFilesReady="UploadPastedFiles"
               OnFilesRejected="ShowRejectedFiles" />

편집기와 연결할 때는 업로드가 끝난 뒤 반환된 URL을 현재 커서 위치에 삽입합니다. 업로드 중에는 임시 미리보기와 실패 상태를 구분합니다.

화면 수명주기

구성요소는 Dispose에서 JavaScript 이벤트를 정리합니다. 같은 페이지에 여러 인스턴스를 두면 대상 선택자가 겹치지 않게 하고, 슬라이드나 탭을 다시 열 때 이벤트가 중복 등록되지 않는지 확인합니다.

보안과 문제 확인

  • 클라이언트의 크기와 형식 검사를 서버에서 다시 수행합니다.
  • 붙여넣은 HTML이나 스크립트를 파일로 오인해 실행하지 않습니다.
  • 거부된 파일명과 사유를 사용자에게 한 번에 안내합니다.
  • 화면 전체를 대상으로 할 경우 일반 텍스트 입력의 붙여넣기를 방해하지 않는지 확인합니다.

수정 이력

이 문서의 변경 내역을 시간순으로 볼 수 있습니다.

표시할 수정 이력이 없습니다.

An unhandled error has occurred. Reload 🗙

Rejoining the server...

Rejoin failed... trying again in seconds.

Failed to rejoin.
Please retry or reload the page.

The session has been paused by the server.

Failed to resume the session.
Please retry or reload the page.