Lexxy 에디터의 파일 첨부 유효성 검사를 구현하기 위해 Stimulus 컨트롤러가 사용되었습니다. 이 컨트롤러는 Lexxy의 lexxy:file-accept 이벤트를 수신하여 파일이 첨부되기 전에 사용자 정의 규칙을 적용합니다.
Stimulus 컨트롤러 구현 세부사항
- 정적 값(Static Values):
maxBytes: 허용되는 최대 파일 크기(바이트 단위)를 정의합니다. 기본값은 5MB입니다.types: 허용되는 MIME 타입 배열을 정의합니다. 기본값은image/jpeg,image/png,application/pdf입니다.
- 연결(connect) 및 해제(disconnect) 메서드:
connect(): 컨트롤러가 DOM에 연결될 때lexxy:file-accept이벤트 리스너를 등록합니다.disconnect(): 컨트롤러가 DOM에서 제거될 때 이벤트 리스너를 해제하여 메모리 누수를 방지합니다.
_onAttachmentsAccept이벤트 핸들러:event.detail?.file을 통해 첨부될 파일 객체에 접근합니다.- 파일 유형 검사:
this.typesValue에 파일의 MIME 타입이 포함되어 있지 않으면event.preventDefault()를 호출하여 첨부를 중단하고 경고 메시지를 표시합니다. - 파일 크기 검사:
file.size가this.maxBytesValue를 초과하면 첨부를 중단하고 최대 허용 크기를 포함한 경고 메시지를 표시합니다.
이러한 방식으로, Lexxy 에디터 자체는 가볍게 유지하면서도 파일 첨부에 대한 강력한 제어 로직을 애플리케이션 단에서 관리할 수 있게 됩니다.