파일 입력에 프로그래밍 방식으로 파일 이름 표시: Angular를 사용하여 구현됨

Question

좋은 저녁입니다

저는 Angular15를 사용하여 애플리케이션을 개발 중이며 그 기능 중 하나는 팀 구성원 데이터로 테이블을 채우는 것입니다.

회원을 추가하려면 버튼을 클릭한 다음 모달 창을 표시하여 데이터를 채우고 일부 파일을 추가해야 합니다. 편집 작업은 동일합니다.

데이터를 성공적으로 저장하고 서버 폴더에 파일을 업로드했는데 편집 중에 문제가 발생했습니다. 파일 입력 상자에 업로드한 파일 이름이 표시되지 않고 파일이 업로드되지 않은 것처럼 보이지만 사실 이미 업로드됐어요.

문서 이름을 멤버 속성에 저장하고 ngModel을 사용하여 파일 입력 상자를 멤버 속성에 바인딩했습니다.

입력 상자에 "선택한 파일 없음"이라는 메시지가 표시되고 입력 상자에서 프로그래밍 방식으로 파일 이름을 설정하려고 하면(.ts 파일에서 ViewChild 및 ElementRef를 사용하여 제어) 다음 오류가 발생합니다.

core.js:1448 오류: 포착되지 않음(약속 중): InvalidStateError: 'HTMLInputElement'에 'value' 속성을 설정할 수 없습니다. 이 입력 요소는 프로그래밍 방식으로만 빈 문자열로 설정할 수 있는 파일 이름을 허용합니다. 오류: 'HTMLInputElement'의 '값' 속성을 설정할 수 없습니다. 이 입력 요소는 프로그래밍 방식으로만 빈 문자열로 설정할 수 있는 파일 이름을 허용합니다.

보안 위험 때문에 이 작업을 수행할 수 없다는 점을 충분히 이해하지만 프로그래밍 방식으로 파일을 삽입하고 싶지 않고 내용이 아닌 파일 이름만 표시하고 싶습니다. 이것을 달성할 수 있는 방법이 있나요?

감사합니다.

Answer 1

웹 문서에서

const input = document.querySelector("input[type=file]");
input.value = "foo";