문서 › 웹 컴포넌트
업로드와 폼 연동
upload 속성으로 검사를 통과한 파일만 내 서버로 보내고, 폼 제출과 함께 씁니다.
upload 속성을 주면 검사를 통과한 파일을 XHR로 그 URL에 보냅니다(진행률 때문). 쿠키는 같은 출처일 때만 갑니다. 인증 헤더는 beforeupload 에서 넣습니다. upload 가 없으면 파일은 어디로도 가지 않습니다.
<excel-82 id="x" headers="이름,금액" upload="/api/upload" upload-as="json" locale="ko"></excel-82>
<script>
x.addEventListener('beforeupload', (e) => { e.detail.init.headers['Authorization'] = 'Bearer ' + token; });
x.addEventListener('uploaded', (e) => console.log(e.detail.status, e.detail.response));
</script>upload-as="file"(기본): multipart/form-data, 필드 이름은upload-field(기본file).upload-as="json":{ fileName, sheet, columns, rows }를application/json으로 보냅니다.- 업로드에 성공하면 폼 값은 서버 응답 문자열입니다. 파일을 두 번 보내지 않습니다.
upload-auto="false": 폼 제출을 가로채 업로드를 마친 뒤form.requestSubmit()을 다시 부릅니다. 실패하면 제출하지 않고 오류를 보여 줍니다.- 업로드를 쓰지 않으면 폼 값은 검사를 통과한 파일 자체입니다.
폼 안에서
ElementInternals(formAssociated)를 쓰므로 일반 입력칸처럼 name, required, disabled 가 동작합니다.
<form action="/save" method="post">
<excel-82 name="excel" required headers="이름,전화번호,금액"
upload="/api/upload" upload-auto="false" locale="ko"></excel-82>
<button>제출</button>
</form>| 폼 제출이 막히는 경우 | 메시지 |
|---|---|
required인데 파일이 없음 | 파일을 선택해 주세요 |
invalid | 첫 번째 오류 메시지 |
uploading | 업로드가 진행 중입니다 |
uploadfailed | 업로드에 실패했습니다 |